Improve accessibility on the web

Thinking about accessibility is not a "nice to have", it's a must have. Especially if your product reaches or aim to reach millions of users at some point.

According to the WHO (World Health Organization), 1.3 billion people experience a significant disability.

When developing for the web, take into consideration how an Assistive Technology (AT) will interact with your pages.

Some of the most used ATs are:

  1. Screen readers;
  2. Screen magnifiers;
  3. Speech recognition;

Now let's talk about how to achieve at least some level of accessibility.

Semantic HTML

Just by using semantic HTML in your pages will make your pages more accessible.

The web standards are decided by W3C, a consortium that guides web development towards best practices, accessibility standards and much more.

You can check out some of their accessibility guides here.

So, why using semantic HTML will make your page more accessible?

That's because it provides a meaningful structure to your web content, making it more understandable and navigable for users with disabilities.

Semantic HTML elements like <header>, <nav>, <main>, <footer>, <article>, and <section> clearly define the parts of a web page (for the user and the developer!), allowing assistive technologies to interpret and interact with the content as intended.

For example, the screen readers will interpret these elements and then create shortcuts for users to quickly navigate to different sections of a page, improving the user experience.

Not only it helps with accessibility, it also improves the document outline, making it easier for search engines to index and crawl the content, which indirectly benefits users by making the information more discoverable and of course, your business will benefit from it by making your pages SEO optimized.

Another example, is using <button> for buttons instead of non-semantic <div>s helps users interact with all controls of the web application, regardless of the input method they are using: mouse, keyboard, voice command...

In a nutshell, by using semantic HTML will result in pages that are:

  1. More accessible;
  2. SEO optimized;
  3. Easier to reason when coding;

UI Design

Now that your HTML is semantic, let's talk about how your UI design can hurt accessibility.

Color Contrast

Low contrast between text and background colors makes it hard for users with visual impairments, like color blindness, to read your content. Make sure that your text and background colors have a sufficient contrast ratio (4.5:1) as recommended by WCAG (Web Content Accessibility Guidelines).

Navigation

A lack of consistent navigation can get in the way for users of screen readers. Make your site's navigation logical and predictable across all pages.

Using Color Alone to Convey Information

By using only color to convey information (like using red to flag required fields in a form) can exclude users who are color blind. Include text labels or icons besides colors.

Alt Text for Images

Images without alternative text (alt text) are inaccessible to users who rely on screen readers. Always provide meaningful alt text for images that convey information so they can understand the image's message.

Small Click Targets

Small click targets can be challenging for users with motor disabilities to interact with (like Parkinsons). Buttons, links, and other interactive elements must have sufficient space and clickable areas to accomodate those users.

How to test for accessibility

Here are some tools available to test your page for accessibility:

  1. Using ATs yourself like screen readers;
  2. If you use Chrome there's the Accessibility tree, and also the Lighthouse tool that checks for speed and accessibility, both available on dev tools.
  3. aXe extension for Chrome will run accessibility tests on your page and tell you what needs to be fixed.
  4. If using React on your front-end you can use libraries like axe-core/react or jest-axe for Vue, React and Angular testing.

Hopefully this article will help on your journey to a more accessible web :)