Accessibility is not an option reserved for large organizations. It is a legal, ethical and technical standard every developer must master. WCAG and ARIA are your first tools.
WCAG (Web Content Accessibility Guidelines) is the international web accessibility framework maintained by the W3C. Version 2.1, now required by most European legislation, defines three levels: A (minimum), AA (recommended target) and AAA (advanced requirements). AA compliance covers the essentials: sufficient contrast, keyboard navigation, text alternatives, captions for videos.
ARIA (Accessible Rich Internet Applications) attributes complement semantic HTML when the latter is not enough. An
aria-label gives an accessible name to an element without visible text — an icon, a symbolic button. ARIA roles
such as role="dialog", role="navigation" or role="alert" tell assistive technologies the nature of each component.
The golden rule: always prefer native semantic HTML (<button>, <nav>, <main>) before adding ARIA.
A frequently overlooked element is focus management. When a modal opens, focus must move inside and remain there
until closing — this is the focus trap. When a dynamic component displays an error, aria-live announces the change
to screen readers. These details may seem minor but make all the difference for a blind user navigating by keyboard.
- Target WCAG 2.1 level AA compliance as a minimum
- Use semantic HTML before resorting to ARIA
- Check color contrast with a ratio of at least 4.5:1
- Test your site with a real screen reader (NVDA, VoiceOver)
→ See also: Accessible forms · Accessibility testing tools