Accessibility in Modern UI: A Practical WCAG 2.2 Guide
Building a UI Encyclopedia isn't just about making things look good; it's about making them usable for everyone (A11y). In 2026, web accessibility is a legal requirement in many regions and a moral obligation everywhere.
Understanding WCAG 2.2
The Web Content Accessibility Guidelines (WCAG) are organized into four principles: Perceivable, Operable, Understandable, and Robust (POUR).
1. Semantic HTML: The First Line of Defense
90% of accessibility issues are solved by using correct HTML elements.
- Use
<button>for actions,<a>for navigation. - Use
<header>,<main>,<footer>, and<nav>landmarks. - Don't use
<div onclick="...">. A div is not focusable by default and doesn't communicate "interactive" to a screen reader.
2. Color and Contrast
Ensure your text has sufficient contrast against the background. For normal text, WCAG AA requires a ratio of 4.5:1. Tools like the Chrome DevTools "CSS Overview" panel can verify this automatically across your site.
3. Focus Management
For users navigating via keyboard (Tab key), "Focus States" are vital. never do outline: none unless you have a specific replacement style (like a ring/border).
When opening a Modal (Dialog), focus should be trapped inside the modal until it closes. When it closes, focus should return to the button that opened it.
4. Use of ARIA (Accessible Rich Internet Applications)
ARIA attributes bridge the gap when native HTML falls short.
aria-label: Invisible label for screen readers (e.g., on an icon-only button).aria-expanded: Tells the user if a dropdown is open or closed.aria-current: Indicates the current page in a navigation menu.
Rule of thumb: "No ARIA is better than bad ARIA." Use semantic HTML first.
5. Testing
Automated tools like Lighthouse or axe-core catch about 30-50% of issues. Manual testing is required for the rest:
- Try navigating your site using only the Tab, Enter, and Space keys.
- Use a screen reader (NVDA or VoiceOver).
Conclusion
Accessible design is good design. Features like high contrast and clear focus indicators help everyone, including users in bright sunlight or with temporary disabilities.