Web accessibility is not optional: it is an ethical requirement and, in many contexts, a legal one. Building interfaces usable by visually impaired or blind people means ensuring every feature is reachable and understandable through screen readers and assistive technologies.
WCAG Guidelines
The Web Content Accessibility Guidelines (WCAG) define three conformance levels: A, AA, and AAA. Level AA is the recommended minimum and is required by regulations such as the European Accessibility Directive (EN 301 549).
The four fundamental principles — POUR — are:
- Perceivable: information must be presented in ways users can perceive
- Operable: the interface must be navigable by keyboard without a mouse
- Understandable: content and behavior must be clear
- Robust: content must be interpretable by current and future assistive technologies
ARIA Attributes
WAI-ARIA (Accessible Rich Internet Applications) provides HTML attributes to communicate the role, state, and properties of elements to assistive technologies.
<!-- Landmark regions -->
<nav aria-label="Main navigation">...</nav>
<main aria-labelledby="page-title">...</main>
<!-- Interactive elements -->
<button aria-expanded="false" aria-controls="menu">Open menu</button>
<!-- Dynamic state -->
<div role="alert" aria-live="polite">Message sent successfully</div>
<!-- Decorative vs informative images -->
<img src="logo.png" alt="Company logo" />
<img src="divider.png" alt="" role="presentation" />
ARIA Usage Rules
- Do not use ARIA if semantic HTML is sufficient —
<button>is always better than<div role="button"> - All interactive ARIA widgets must be keyboard navigable
- Do not hide visible elements from screen readers without reason
- Always label form controls — with
<label>,aria-label, oraria-labelledby
Practical Best Practices
Semantic Structure
Using semantic HTML tags is the foundation: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>. Screen readers use these landmarks to enable rapid navigation between sections.
Logical DOM Order
Visual order and DOM order must match. Using CSS to reposition elements visually is fine, but the DOM must remain logically sequential.
Focus Management
/* Never remove the outline without an alternative */
:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
For modals and dialogs, focus must be trapped inside while the window is open and returned to the triggering element on close.
Alternative Text for Images
- Informative images: descriptive and concise
alttext - Decorative images:
alt=""(empty string) - Complex images (charts, diagrams): extended description via
aria-describedbyor contextual text
Color Contrast
WCAG AA requires:
- 4.5:1 for normal text
- 3:1 for large text (18pt or 14pt bold)
- 3:1 for graphical elements and UI components
Dynamic Content
For dynamic updates (notifications, errors, search results) use aria-live:
<div aria-live="polite" aria-atomic="true" class="sr-only">
<!-- Messages inserted here are announced by the screen reader -->
</div>
Testing with Screen Readers
Testing with real tools is irreplaceable:
- NVDA (Windows, free) + Firefox
- JAWS (Windows, commercial) + Chrome/Edge
- VoiceOver (macOS/iOS, built-in) + Safari
- TalkBack (Android, built-in) + Chrome
Quick Checklist
- Full keyboard navigation (Tab, Shift+Tab, Enter, Space, arrow keys)
- “Skip to main content” link visible on focus
- All form fields have associated labels
- Images have appropriate alt text
- Contrast meets AA
- Modals correctly implement focus trap
- Error messages are associated with fields via
aria-describedby - Dynamic content uses
aria-live
Resources
- WCAG 2.2 — official W3C specification
- WAI-ARIA Authoring Practices — reference patterns
- axe DevTools — browser extension for automated audit
- WebAIM — practical resources and guides