Introduction in accessibility (a11y)

black and white brick wall

Accessibility is something we should permanently have in the back of our minds whenever we develop something in the frontend of our application.

If you start to look into Web Content Accessibility Guidelines (WCAG), like me, you might quickly feel overwhelmed. However, like many of the things around us, we can use common sense to navigate all these rules. But some level of empathy is needed and also knowing some basics about the tools we can use will help.

Why?

The top reasons to pay attention to accessibility are:

  • It's the right thing to do;
  • It's the law;
  • It's profitable, since you have a wider audience.

You should think of users who use screen readers, who can only use the keyboard or the mouse, people who are somehow visually impaired (e.g. need glasses or are color blind), people who are prone to seizures, people who have an attention deficit, people who can't hear well and others.

WCAG

The WCAG is divided into 4 principles (POUR) and 13 guidelines:

  • Perceivable
    • Text alternatives;
    • Time based media;
    • Adaptable;
    • Distinguishable;
  • Operable
    • Keyboard accessible;
    • Enough time;
    • Seizures;
    • Navigable;
    • Input modalities;
  • Understandable
    • Readable;
    • Predictable;
    • Input assistance;
  • Robust
    • Compatible.

WCAG also has 3 different levels of conformance, out of which A and AA are usually those legally required:

  • A - lower conformance, minimal requirements;
  • AA - higher conformance;
  • AAA - highest level of conformance.

More info:

For developers

As a developer, here are some key things we should pay attention to:

  • The focus state (*:focus { outline: 1px solid red; } is the old way, the new way is *:focus:not(:focus-visible) { outline: none; } and *:focus-visible { ... }) to help the keyboard users know where they are in the page. You don't have to use outline, but it's at least recommended have it as transparent;
  • Use native components and native controls whenever possible (e.g. use the default radio buttons). For custom solutions, remember to use the role= attribute and the other special attributes. Remember to use tabindex="0";
  • To ease the interaction, you could give instructions to the user on what to do in order to access the content (and have them available only if you browse the page in a certain way, e.g. only with the keyboard);
  • Remember to test and implement for screen resizing;
  • Remember to test your apps and websites in Dark mode;
  • The automated tools can test for and detect accessibility issues, but they are not able to find everything, so manual testing is needed.

You can also use packages to help with accessibility:

Read more:

Tags