Make the learning
easier to reach.

Navigating the website

Use the “Skip to content” link at the start of a page to move past repeated navigation. All main destinations are ordinary links. The header remains available while scrolling, and anchored article headings leave space beneath it.

On small screens, the navigation button opens the menu and reports its expanded state. Press Escape to close an open menu and return focus to its button. Without JavaScript, the navigation links remain available.

Reading and images

Pages use a logical heading structure, readable text, and visible keyboard focus indicators. Article covers include descriptive alternative text. Decorative icons and the homepage's background connections are hidden from assistive technology so they do not interrupt the content.

Images include dimensions to reserve layout space. The site uses local styles, images, and system fonts rather than requiring a remote font or icon service. Content adapts to narrow screens; code blocks may scroll horizontally where preserving a JSON line helps readability.

Pattern Lab controls

Move between pattern tabs with the arrow keys, Home, and End. Tab selection is exposed through tab and panel roles. Copy buttons announce a result in a status message, and a browser restriction does not remove the original text.

The example-result control reports whether its panel is expanded. Results are explicitly labelled as fixed examples rather than generated responses. When JavaScript is disabled, the first example remains readable and the complete pattern pack remains downloadable.

Motion and contrast

The design uses small transitions for interactive feedback rather than essential animation. Reduced-motion preferences turn off those transitions and smooth scrolling. Information is not communicated by color alone: categories, selected controls, and example status also use text and state attributes.

Known scope and feedback

This page describes implemented features; it does not claim an independent accessibility certification. Browser, operating-system, and assistive-technology combinations can behave differently. Clipboard access and download behavior also depend on your browser settings.

Email [email protected] with the affected page, the action you were trying to take, and the browser or assistive technology involved. Avoid sending private information. A clear description of the barrier helps distinguish a content problem, an interaction issue, and a browser-specific limitation.