Rachel Shillcock: Accessibility and responsive design: Friend or foe

Published: June 19th 2015by Orde Saunders

Rachel Shillcock was talking about accessibility and responsive design at Responsive Conf, these are my notes from her talk.

What is accessibility (a11y)

The first web page uses markup still in use today. As websites have evolved so have the issues we have to deal with. A11y on the web should be open and accessible to all. A11y is more than just a check list.

It's not just visual impairment, physical and cognitive impairment also need consideration. As educated members of the web community we have a responsibility to share what we know.

For too long we ignored a11y and this made it hard to access sites on multiple devices.

RWD
Colour contrast
Size of elements
HTML structure
Font styles and weights
Hover, active, focus state
Subtitles
Performance

A11y and design are complimentary. Take advantage of tools that are available - find ones that work for you. It takes time at first but then it becomes part of the process and it's free.

Tools

Colour contrast - websites are information. Most people don't use a Mac with a beautifully colour corrected screen - know your audience. 3:1 - 6:1 is probably OK for AA, above 7:1 is AAA.

If you don't meet A then you're not meeting the minimum. AA is good. AAA is ideal.

HTML_CodeSniffer by Squizz - bookmarklet that checks the page.

Adaptive web design by Aaron Gustafson - good practical advice on a11y. Aria roles are easy to add and give good benefits.

Colour blindnes checks - see how a design holds up when you can't rely on colour.

Tota11y - JS plugin that gives you a checklist of a page that covers the basics.

Web developer tool bar - turn off CSS, JS and images. Check the fundamentals of your page.

Test with real people where ever you can - they will find things you haven't thought about.

Creating accessible websites can change people's lives. We have a responsibility to use our talents for good. A11y and RWD doesn't mean you have to sacrifice creativity - they provide opportunities. Use your superpowers for good.