Accessibility should be built into a design system from the start so that every team inherits better behavior instead of fixing the same issues repeatedly. The shorthand a11y refers to the eleven characters between the first "a" and the "y" in the word. The international standard is the Web Content Accessibility Guidelines, or WCAG, organized around four principles often remembered as POUR: Perceivable, Operable, Understandable, and Robust. Every guideline maps to one of these principles. Conformance levels are A for must, AA for should, and AAA for advanced, and most public systems target AA. Accessible defaults let every team inherit better behavior without having to remember or implement the rules in every product.
A few rules cover most practical accessibility work. Color contrast is foundational: WCAG AA requires a 4.5:1 luminance ratio between text and background for normal text, 3:1 for large text, and 3:1 for non-text UI components like icons, focus indicators, and form borders. Color alone should never convey state, since a red dot without an icon, label, or pattern fails color-blind users. Keyboard accessibility demands that every interactive element is reachable and operable via keyboard alone, with a logical tab order that matches the visual reading order; out-of-order tabbing disorients keyboard and screen reader users. Focus must be visible at all times, and modals typically need a focus trap so keyboard users do not tab into hidden background content. A skip-navigation link helps keyboard users bypass header navigation on long pages.
ARIA, the Accessible Rich Internet Applications specification, supplements native HTML semantics when they fall short. The first rule of ARIA is to prefer native HTML elements whenever possible, since native semantics are more reliably supported than custom ARIA constructions. When ARIA is necessary, aria-label provides an accessible name when visible text is unavailable, aria-labelledby points to existing text that should serve as the name and is preferred when visible text exists, and aria-describedby points to supplementary text like helper copy on a form input. aria-live marks dynamic regions so screen readers announce updates politely or assertively. Screen readers like NVDA, JAWS, and VoiceOver convert UI to speech or braille. Touch target sizes follow WCAG's 24x24 CSS pixel minimum, with mobile platforms recommending 44 to 48 pixels to reduce mis-taps. Motion should respect the prefers-reduced-motion user preference, disabling or simplifying animations for users who need them. Automated accessibility tests built on tools like axe-core catch a portion of WCAG violations, but manual review remains required. Periodic accessibility audits confirm the system continues to meet standards as it evolves.