| name | entur-accessibility |
| description | Build accessible Entur web applications that comply with WCAG 2.1 and Norwegian universell utforming (UU) requirements. Use when the user is working on accessibility, asking about WCAG, universell utforming, screen readers, keyboard navigation, focus management, color contrast, aria attributes, semantic HTML, or Norwegian IKT accessibility regulation. Also trigger when building @entur/* applications that need to meet legal compliance requirements — all Entur digital products must comply with WCAG 2.1. Use even if the user just says "make this accessible" or "is this accessible" without mentioning WCAG by name. |
Audience: AI coding agents. Entur developers should visit linje.entur.no/universell-utforming.
Entur Accessibility
This skill helps you build accessible Entur applications that comply with WCAG 2.1 and Norwegian law.
Accessibility at Entur isn't optional. Entur's digital products must comply with 47 of 78 WCAG 2.1 success criteria per the Norwegian IKT regulation (implementing the EU Web Accessibility Directive). Beyond compliance, Entur's mission — making public transport accessible to all — means accessibility is central to what the products do.
Accessibility docs: https://linje.entur.no/universell-utforming
Norwegian WCAG authority: https://www.uutilsynet.no
Critical Rules
- ALWAYS use
@entur/* components — keyboard support, focus management, ARIA roles, and color contrast are handled internally. Custom components require you to replicate all of this.
- ALWAYS add
SkipToContent from @entur/a11y as the first focusable element in every app, with <main id="main-content"> as the target.
- ALWAYS use visible
label props on every form field (TextField, Dropdown, DatePicker, etc.). Never rely on placeholder alone — it disappears on input and is not accessible.
- NEVER remove or suppress focus indicators —
outline: none without a replacement fails WCAG 2.4.7.
- ALWAYS test with keyboard before considering a feature complete — automated tools catch only ~30% of issues. Tab through every interactive element; verify focus order is logical.
- ALWAYS use tokens from
@entur/tokens for color — prefer base tokens (base.css) first, semantic tokens as fallback. They are pre-tested for contrast. Never pair tokens from opposite contexts (e.g. --text-light on white).
- ALWAYS provide text alternatives for images (
alt) and icon-only buttons (aria-label or VisuallyHidden).
Reference files
references/entur-a11y-patterns.md — SkipToContent, VisuallyHidden, form labeling, semantic HTML, ARIA live regions, image alt text, icon accessibilityreferences/testing-guide.md — how to test keyboard navigation, zoom, color contrast, screen readers, heading structure; automated tool recommendations; Norwegian law context
Norwegian context
Norwegian law requires public sector digital products to comply with WCAG 2.1, level AA. Entur, as a state-owned company, is subject to these requirements.
Common issues found in Norwegian audits (from uutilsynet.no tilsynsrapporter):
- Missing or incorrect form labels
- Insufficient color contrast
- No skip link to main content
- Broken keyboard navigation
- Missing heading structure
The Norwegian accessibility authority publishes regular audit reports: https://www.uutilsynet.no/tilsynsrapporter/tilsynsrapporter/270
Quick reference
Required in every app: SkipToContent first element + <main id="main-content">
Form labels: always label prop, never placeholder-only
Contrast: 4.5:1 text, 3:1 large text and graphics
Keyboard: all functionality must be reachable by Tab
Test order: keyboard → zoom → contrast → screen reader → automated
Beyond Entur
For comprehensive general WCAG knowledge, the community skill addyosmani/web-quality-skills@accessibility covers broader patterns. External references: WCAG 2.1 Quick Reference, uutilsynet.no.
