Accessibility Conventions
Main content start
To make our sites more friendly to screen readers and other assistive technologies, we have developed a set of conventions to verify accessibility and to produce HTML that is valid, semantic, and logical.
Verify accessibility
- Generates valid and semantic HTML
- Passes automated accessibility testing
- Passes manual accessibility testing. See Accessibility Evaluation Quick Checks from Office of Digital Accessibility (ODA)
See Front-End validation in our Github PR template
Use semantic HTML
- HTML5 for time and date
- Article for self-contained compositions
- Headings
- If it's a list, make it a list
Use logical HTML
Follow ARIA patterns
The ARIA Authoring Practices Guide (APG) defines how to create accessible web experiences.
Resources for accessibility conventions
Modern CSS Upgrades To Improve Accessibility from Modern CSS
This post covers a range of topics that use CSS for better accessibility:
- Focus Visibility
- Focus vs. Source Order
- Desktop Zoom and Reflow
- Sizing Interactive Targets
- Respecting Color and Contrast Settings
- Accessibility Learning Resources
- Alt text for CSS generated content - If you add content via CSS, you'll also want to add alt text via CSS.