Accessibility
Tactics
Images
- Images should have alt text unless they don't convey information. In that case, they should have a 'role='presentation' attribute.
Text
- Text should have enough contrast to be readable. Contrast should be at least 4.5:1
- Text should be readable when the screen is zoomed in to 200%
- Blocks of text are no more than 80 characters wide.
- Lines should have at least a 1.5 line height.
Forms
- Form buttons have a descriptive value.
- Form inputs have associated text labels.
Media
- Provide a text transcript for non-live audio-only files.
- Synchronized captions are provided for non-live video.
- Controls are provided to stop, pause, mute, or adjust audio volume.
Headings
- Headings should be in order and match the layout of the content (don't jump from h1 -> h3 for example)
Color
- Color is not used as the sole method of conveying content or distinguishing visual elements.
Guidelines
POUR
- Perceivable - can users perceive the content?
- Operable - can users use the UI components to navigate the content?
- Understandable - can users understand the content?
- Robust - Can the content be consumed by a wide variety of user agents and browsers? Does it work with assistive technology?
Resources
Tools