Accessibility
Design with empathy
Accessibility is for everyone
Permanent disabilities
10m people in the UK are disabled (~17% of population)
Half of these are over state pension age
4.5% of the population are colour-blind (double that for men)
Accessibility is for everyone
Temporary or situational disabilities
People with injuries/post-surgery 🚑
People holding a child/bag/tube pole 🍼
People in bright sunlight 😎
People in a quiet room without headphones 💤
People who hate phone calls (✋🏻)
etc
Design considerations
Use more than colour to convey information
Benefits:
- Color-blind users
- Black and white/crappy displays
- Probably screen-reader users
Examples:
- Validation icons on form inputs
- Label data directly rather than just background-color
Design considerations
Ensure designs have enough colour contrast
This benefits:
- Color-blind users
- Crappy display/projector users
- Low-vision users
- You on your phone when it's really sunny
Examples:
- Avoid tiny light grey text on dark grey backgrounds
- Ensure foreground colours differ from background-colours in value as well as hue
Design considerations
Group relevant information together
Benefits:
- Screen-reader users
- Magnifier users
- Motor-impaired users
- You when you're too lazy to scroll
Examples:
- Don't group error messages at the bottom of a form
- Put controls next to the elements they're controlling
- At least link related content together (e.g. footnotes)
Design Tools
Stark Sketch plugin
Stark lets you simulate 8 different kinds of colour-blindness within Sketch, and will also ensure your designs have sufficient contrast.
Design Tools
Contrast Ratio
Lea Verou's contrast ratio checker lets you quickly test different colours against each other (it takes CSS, RGB and HSL)
Testing Tools
Lighthouse (Chrome)
The audits tab in Chrome's dev tools now runs Google's new Lighthouse tool. This will run through the page and highlight any potential accessibility issues.
Developer Tools
pa11y-ci
pa11y-ci runs in your CI pipeline against a live URL (probably a QA domain). It can be configured to break the build if it finds a set threshold of errors.