W3C publishes WCAG 3.1 draft adding component-level semantics for design systems

Design · 4 min read

W3C's new draft guidance, WCAG 3.1, formalizes expectations for how design systems should express accessibility semantics at the component and token level. The draft emphasizes that color tokens, typographic scales, and interactive patterns must carry semantic metadata so automated tooling and assistive technologies can reason about intent rather than only looking at DOM markup.

A key change is a set of component-level success criteria that specify when a reusable component is “accessible by design,” including keyboard support, semantic labeling, focus management, and consistent state representation. The document also provides machine-readable schemas for exporting accessibility annotations from design tools into component libraries and testing frameworks.

The draft is explicitly intended to reduce duplicated accessibility work across teams by enabling a single certified component to be reused across services. W3C solicits feedback from designers, developers, assistive-technology vendors, and government agencies, and encourages pilot implementations to validate the criteria across languages and platforms.