How to get started with web accessibility
These useful tips will help you take the first steps toward an accessibile website that meets the WCAG 2.1 AA guidelines.
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.
A good place to start is to get the HTML of your website in order. Use elements for their intended purpose and your site will be largely accessible.
As a developer, semantic HTML is the most important thing to start with.
You can easily check your HTML with the W3C validator.W3C HTML validator
The A11Y 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.A11Y Project checklist
The A11Y 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.
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.
The vast majority of desktop users use Google Chrome. Integrated into Google Chrome is Lighthouse. In Lighthouse, you can measure performance, search engine optimization (SEO) 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 HTML and CSS. 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.Blog overview