A Cheat Sheet to Understand Web Content Accessibility

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?

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.

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 a 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 a 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 focusing

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
• Send reminders and prompts

Hope you found this short post useful and that you’ll continue to broaden your knowledge on accessibility.

Now, can you guess what a11y means?

Tools and resources

Funkify

Funkify is an extension for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities.

Wave

Wave is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities.

You can also try out Inclusive Components Design, a11ycasts, and BBC a11y guides.