Accessibility
Make the web work for everyone
The Web is accessible by default—if your website isn’t accessible it’s your fault.
Visual impairments
Blindness, partial or full; colour blindness; cataracts; glaucoma; age; etc.
- Allow text to be resized
- Have good contrast in colours
- Test for colour blindness related issues
- Make sure the website works well with screen readers
- Use proper alt attributes
Mobility and dexterity impairments
Missing a hand, limited movement, difficulty with fine control, trouble holding a mouse, termors or shakes, etc.
- Recognize and prepare for the fact that not everybody will use a mouse
- Make the website keyboard accessible
- Increase hit areas of links and buttons
Auditory impairments
Deafness, partial deafness, etc.
- Provide text captions and subtitles
Cognitive impairments
Dyslexia, memory issues, problem solving issues, attention deficits, hyperactivity, reading abilities, etc.
- Make it clear where in the website the user is
- Organize your content correctly & use proper headings
- Make the text easily scannable
- Clearly mark links
- Use lots of images and graphics
WAI-ARIA
Describes enhancements to websites to make them more accessible
Extra attributes to help accessibility tools understand your content better
HTML
<!-- Define important landmarks -->
<header role="banner">
<!-- banner, navigation, search, main, contentinfo -->
<!-- Define more accessible information -->
<a href="…" aria-label="More complex information">
<!-- Define an HTML element that contains the alternative description -->
<img src="…" alt="…" aria-details="thing">