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
- Guidelines from w3.org:
- Checklist for POUR: https://webaim.org/standards/wcag/checklist
- Free course on accessibility, looks like it would be worth taking for sure: https://docs.microsoft.com/en-us/learn/paths/accessibility-fundamentals/
- accessibility resources: Twitter Link
- https://frontendmasters.com/courses/web-accessibility/
- https://www.amazon.com/Inclusive-Design-Patterns-Heydon-Pickering-ebook/dp/B01MAXK8XR
- https://www.goodreads.com/book/show/20640233-a-web-for-everyone
- https://frontendmasters.com/courses/javascript-accessibility/
- https://inclusive-components.design/
- a free course from Google on Udacity
- WAI-ARIA Authoring Practices
- A11ycasts
Tools
- Accessibility Inspector (haven't tried it yet)