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.

Thanks 🔥