TL;DR

WCAG — guidelines for building accessible applications.

WCAG AA level — the minimum standard you must comply with, especially under US and EU legislation starting from 2025.

AOM (Accessibility Object Model) — a semantic model used by screen readers.

Use semantic HTML elements (header, footer, article, etc.) whenever possible.

The heading hierarchy (H1…H7) is important for accessibility.

Prefer native HTML elements: button, input, checkbox, radio, etc.

If the design requires non-native or non-semantic components, use the role attribute. Documentation.

If you change the role of an element using role, its behavior must match the role. For example, role="button" must activate when pressing Enter or Space, and the default behavior of Space (e.g., page scroll) must be disabled.

The minimum contrast ratio for WCAG compliance is AAA.

Testing tools like Lighthouse or AXE do not guarantee actual accessibility. They only check for contrast and the presence of tags/attributes during initialization but do not assess the quality of these attributes or, most importantly, keyboard navigation.

Storybook can help test accessibility by checking the state of each component.

Personal experience: 100% in Lighthouse = only 20% of the actual work. The remaining 80% is usually spent on implementing keyboard navigation.

Tab and Shift+Tab must allow access to all interactive parts of the application. All interactive elements should have tabindex=0.

Focused elements should be visually highlighted. The CSS outline property is a great tool for this.

Skip to main content is a useful feature that allows users to quickly jump to the main content of the page.

Focus Trap is mandatory for modal windows or dropdown menus to prevent users from losing focus.

Usability and accessibility are closely connected. Think about ease of use when designing keyboard navigation.

Automated tests for keyboard navigation are a must! It’s easy to break this functionality but hard to notice the problem.

Building an accessible application is complex and expensive, but it improves SEO, boosts your reputation, and ensures legal compliance!