Skip to main content
Eystein codes

What is web accessibility?

What is accessibility? Why should I care about it?

Tim Berners-Lee, W3C Founding Director and inventor of the World Wide Web says that:

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

And I agree! But I'll provide some numbers to back it up as a good business case, in addition to being a good human.

Accessible to who? To you! #

First we need to define "accessible", so we can measure it. Web accessibility encompasses all disabilities that affect access to the Web, including auditory, cognitive, neurological, physical, speech, and visual.

The World Health Organisation reports that 16% of the world's population has some sort of disability. Fun fact: 8% of all men are colourblind.

In addition there are those without permanent disabilities. These make up 3 additional groups:

And that should cover pretty much everyone else who's ever used the internet.

Benefits #

The great thing is that by building for the first group, we also accommodate the other three!

Making it possible to tab through a form on the keyboard helps both the person who can't use a mouse due to arthritis, and the aspiring wilderness adventurer ordering anti-burn cream from the pharmacy. And as for developing the functionality for this, HTML already has it built-in.

Sticking to semantic HTML gives us an amazing arsenal of accessible and user friendly functionality. For more bespoke cases, and only then, we may make use of WAI-ARIA roles, properties, and states for further specifications.

Finally, it benefits a fifth group I haven't mentioned yet - robots. Not only screen readers, but also search engines, bookmarking apps, RSS readers, "smart speakers", and heaps more.

How do I make my site accessible? #

Despite being such a good idea, and even a legal requirement in many places, according to The WebAIM million 96.3% of all websites in 2023 have Web Content Accessibility Guidelines (WCAG 2) failures.

Of those failures, 96.1% fall into six categories:

  1. Low contrast text (83.6%)
  2. Missing alternative text for images (58.2%)
  3. Empty links (50.1%)
  4. Missing form input labels (45.9%)
  5. Empty buttons (27.5%)
  6. Missing document language (18.6%)

These are fairly low hanging fruit that will make a large positive impact for a lot of people!

If you want to dig into details for your own (or someone else's) webpage, you can get specific feedback in your browser (assuming you're using a Chromium browser, which is everything except Firefox and Safari).

  1. Open up Lighthouse in the developer tools of your web browser, while on the webpage.
  2. Run the test
  3. Check the feedback reported, follow the links for further details.

There's also the Lighthouse web app which performs the same analytics.