12. Accessibility (WCAG 4.5:1)
Engineering for Everyone
Accessibility (often abbreviated as a11y) is not a 'nice-to-have' feature or a final coat of paint. In professional UI Engineering, it is a strict legal requirement. Ignoring accessibility opens companies to severe lawsuits and alienates up to 15% of the global population who live with some form of disability.
⚖️ The Law: WCAG
The Web Content Accessibility Guidelines (WCAG) dictate the international laws of the web. The baseline legal standard for most enterprise applications is WCAG 2.1 Level AA.
👁️ Visual Accessibility & Contrast Math
The most common accessibility failure is low color contrast. If you put light gray text on a white background, visually impaired users (and users in bright sunlight) cannot read it.
WCAG enforces strict mathematical contrast ratios based on relative luminance:
- 4.5:1 — The minimum legal contrast ratio for normal body text (Level AA).
- 3.0:1 — The minimum legal contrast ratio for large text (24px+) or essential UI components like buttons.
- 7.0:1 — The ultra-strict standard (Level AAA) used for government or medical interfaces.
⌨️ Semantic HTML & Keyboard Navigation
A screen reader is a software program that reads the HTML DOM aloud to blind users. If you build a button using a <div onClick={...}> instead of a native <button>, the screen reader does not know it is interactive, and keyboard users cannot 'Tab' to it. Semantic HTML is the foundation of accessible UI.
Furthermore, removing the CSS outline property (which creates the blue ring around focused elements) without replacing it with a custom focus state is the #1 accessibility crime committed by junior developers.
In the Sandbox, you are tasked with conducting an accessibility audit on a 'Hero' component. You will see a live Contrast Ratio calculator. Your mission is to adjust the HEX values of the Background and the Foreground Text until the mathematical ratio surpasses the 4.5:1 AA compliance threshold. A red 'Non-Compliant' tag means your design is legally failing.
Standard text must meet a 4.5:1 ratio to be legally accessible.
Knowledge Check
Ready to test your understanding of 12. Accessibility (WCAG 4.5:1)?