paint-brush
A Cheat Sheet to Understand Web Content Accessibilityby@benjaminbaker
836 reads
836 reads

A Cheat Sheet to Understand Web Content Accessibility

by Benjamin C. BakerMay 12th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - A Cheat Sheet to Understand Web Content Accessibility
Benjamin C. Baker HackerNoon profile picture

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.