Snippet Library
Explore our collection of Gold Standard accessibility patterns. Each snippet includes The Bad, The Good, and a complete checklist.
Accessible Links
How to handle external links and file downloads with clear accessibility indicators.
Accordion (Collapsible Sections)
Create accessible accordion components with proper ARIA attributes, keyboard navigation, and screen reader support.
Complex Tables (Multi-Level Headers)
Create accessible complex data tables with multi-level headers using scope, id, and headers attributes.
Figure with Caption
Proper use of semantic figure and figcaption elements for images and illustrations.
In-Page Anchor Links
Create accessible jump links within a page. Use ID attributes and semantic linking for keyboard and screen reader users.
Checkbox Group
Group related checkboxes with a fieldset and legend for clear screen reader announcements and logical form structure.
Headings Hierarchy
Use proper heading levels (h1-h6) to create a logical document outline that screen reader users can navigate.
Icon-Only Button
When a button has no visible text, an aria-label is mandatory. Learn how to make icon-buttons accessible.
Decorative Images
Learn when and how to hide decorative images from assistive technology using empty alt or aria-hidden.
Alt Text for Images
Images need alt text to be understood by screen reader users. Learn the difference between informative, decorative, and functional images.
Input with Label
Every form input must have a programmatically associated label. Here's how to do it right with the <label> element.
Main Landmarks
Use semantic HTML5 landmarks (header, nav, main, footer) to create navigable page regions for screen reader users.
Mobile Navigation Menu
Create accessible mobile navigation with hamburger menus. Ensure touch targets are large enough and expandable sections are properly announced.
Responsive Site Header
Create accessible responsive headers that adapt from desktop navigation to mobile menu while maintaining keyboard and screen reader accessibility.
Responsive Picture
Using the picture tag for performant, art-directed images while maintaining full accessibility.
Site Header with Skip Links
Create an accessible site header with skip links for keyboard users. Ensure navigation landmarks are properly labeled and organized.
Standard Button
Learn the difference between a real button and a fake one. The <button> element is the foundation of accessible interactivity.
Tables with Colspan and Rowspan
Create accessible tables with colspan and rowspan using proper id and headers attributes to maintain context for screen reader users.
Data Tables
Create accessible data tables with proper headers, captions, and semantic structure for screen reader users.
Tabs Component
Create accessible tabbed interfaces with proper ARIA roles, keyboard navigation, and screen reader support.
Toggle Switch
Create an accessible toggle switch using a checkbox or button with proper ARIA roles and states.
Skip Link
A hidden link that lets keyboard users jump straight to the main content, bypassing repetitive navigation.