Accessibility Cheat Sheet

Do you know what a11y means? If not, it probably means that you still have some catching up to do on the topic of accessibility. The idea of this post is to outline the most important aspects of accessibility, that’s why please treat it more like a cheat sheet than a compendium. At the end of the article, I added some resources that will hopefully encourage you to do some more research on the topic. Enjoy!

 

What is accessibility? What does it mean to be accessible?

 

Accessibility can be viewed as the "ability to access" and benefit from some system or entity. It is an important concept in fields like architecture, landscape architecture, product design, graphic design, transport, web development and digital solutions.

Accessible = Inclusive

Remember! The goal of accessibility is not to create a separate solution, but to accommodate the main solution to as many people as possible. If we keep that in mind, the result will be a better solution for everyone! Think about the elevator - primarily created for people who couldn’t walk the stairs, but made life so much easier for all of us.

Accessibility = Quality

The Web Content Accessibility Guidelines, commonly referred to as WCAG, are a set of standards that have been internationally developed, with the goal of creating a single set of guidelines that are recognized by organizations and individuals around the world.

WCAG 2.0 and WCAG 2.1 are stable, referenceable technical standards. They have 12-13 guidelines that are organized under 4 principles: perceivable, operable, understandable, and robust. For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA
👉 https://www.w3.org/WAI/WCAG21/quickref/

 

Accessibility Issues

 

Let’s think about the accessibility issues a user might face while surfing the web (and I am sure all of us experienced at least one of them more than once!)

👉 Visual

1. Blindness
2. Low-vision
3. Color blindness
4. Using a cellphone on a sunny day

What can we do?

• Use of native HTML elements
• Use alternative text for graphics
• Use colors with high contrast
• Enable navigation with keyboard
• Place related content close together
• Expand abbreviations and acronyms

👉 Hearing

1. Deaf people
2. Hard-of-hearing
3. People who don’t want to disturb

What can we do?

• Use captions for all videos
• Don’t put content in video and audio only, add text as well
• Don’t make the phone the only means of contact with users (for example in the form or on a company website)
• Write in plain English

👉 Motor

1. Inability to use a mouse
2. Slow response time
3. Limited fine motor control
4. Users stuck in a shaky bus
5. Users with small phones

What can we do?

• Enable navigation with keyboard
• Create large clickable spaces
• Make messages clear and concise
• Sliders are cool but also difficult to use, good to have an option to type as well
• Don’t have short time-out windows
• Don’t put too many interactive elements together

👉 Cognitive

1. Learning disabilities
2. Easily distracted people
3. People who have difficulties to focus
4. Parents with small children

What can we do?

• Understandable content: proper structure, (headings, lists and separation)
• Brief and clear messages
• Making errors understandable for the user so he can easily correct them
• Give a response user is expecting
• Keep it simple (e.g don’t use italics)
• Use autocorrect and provide suggestions
• Give reminders and prompts

Hope you found this short post useful and that you’ll continue to broaden your knowledge on accessibilty. Now, can you guess what a11y means?

 

Tools and resources

 

Funkify: extension for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities.
👉 https://www.funkify.org

Wave: a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities
👉 https://wave.webaim.org/

👉 Inclusive Components Design: https://inclusive-components.design/
👉 a11ycasts: bit.ly/a11ycasts
👉 BBC a11y guides: http://www.bbc.co.uk/accessibility/guides/

Comments

[Andrew Baisden]

Great subject i think accessibility can get overlooked far too often when building websites. Because it's mostly associated with disabilities and if you don't have any or know anyone that does you tend to overlook it. Or leave it until last.

[Benjamin C. Baker]

Agreed, and what people often forget is that cost of fixing an accessibility problem is so much higher than taking it into consideration from the start!