How to get started with web accessibility

Not just for developers

Even though much of making a website accessible starts with a developer. Many responsibilities also lies with designers and content managers, for example.

I know, accessibility can be overwhelming at first. But the first steps described below will help you get started.

Semantic H​T​M​L

A good place to start is to get the H​T​M​L of your website in order. Use elements for their intended purpose and your site will be largely accessible.

As a developer, semantic H​T​M​L is the most important thing to start with.

You can easily check your H​T​M​L with the W​3​C validator.

Checklist

The A​1​1​Y Project is a community that wants to make digital accessibility easier. They do this by sharing articles but they also have a very useful checklist. Indispensable when creating content or developing code if you ask me. Especially when developing certain parts for the first time or want some reference.

The A​1​1​Y Project checklist describes not only the technical aspects of accessibility, but also how to create content. Which is actually just as important as the technology.

Scans

There are many different tools on the market to run an accessibility scan. Some are free, while others are paid. You'll understand that the paid solutions, in general, are just a bit better and go into more depth than the free variants. Since in this article I want to focus on the first steps toward accessibility, I will highlight one of them.

Lighthouse

The vast majority of desktop users use Google Chrome. Integrated into Google Chrome is Lighthouse. In Lighthouse, you can measure performance, search engine optimization (S​E​O) but also accessibility, among other things. You can do these measurements on a desktop or mobile view.

Not a total solution

Note that this check is only on a technical level such as H​T​M​L and C​S​S. Functionality for example logical tab order or aria attributes is not examined.

Lighthouse is a great starting point, but certainly not a total solution for accessibility.

Generating Lighthouse report

To open Lighthouse, press F12 on your keyboard or right-click anywhere on a webpage and then choose inspect.

DevTools will now open. Then choose the Lighthouse tab and select accessibility.

Next, choose Analyze page load. The scan is executed and a report is generated showing any errors on the page in question.

Any errors are easily found on the page and suggestions are given on how to fix them. The report is also exportable in different formats for when you want to share these reports.

Want to know more about web accessibility?

In the coming period, I will create a few articles about web accessibility. In each of these articles I will highlight one topic or best practice in this area.