Road to an accessible website, with Lighthouse
3 years ago
Website developers work hard on making website beautiful, improving the performance and page loading time.
Accessibility is another important aspect to concentrate on.
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use themIn this exercise, we will take a website template, we'll walk through some of the accessibility problems, and fix them. We have taken a free template from https://onepagelove.com/devbook and damaged some of the accessibility to lower the score.https://www.w3.org/WAI/fundamentals/accessibility-intro/

Below are a couple of things we'll be working on.
Contrast
Low-contrast text is difficult or impossible for many users to read. When your text brightness is closer to the background color, it can be challenging to read for people with low vision.
You can check the contrast ratio using the contrast checker tool. Some of our elements fail in the contrast check, especially the button. Below are the results for the contrast check result of our button.

Title for your webpage
If your document doesn't have a <title>
, that's a red flag. The title of your
webpage is consumed by the search engines as well as the users. It helps to give an overview of
your page content to both search engines and assistive technologies.
Alt tags for images
You can provide an alt
tag for your image, which provides a short description of
your image.
<img src="my-image.png" alt="person playing piano">
After page loading, if your image does not load, the alt
description will be shown.
Labels for form elements
If your form elements such as input
do not have an associated label with them,
this check fails.
Labels for form elements can be helpful for tools like screen readers.
If you think the label will not go with your page design, take a look at how bootstrap does it.
Bootstrap CSS comes with a class sr-only
which visually hides the label but still
accessible for assistive technologies.
Order of headings
In HTML, we have heading elements such as h1, h2, h3, h4, h5, h6
and they carry the
importance in the same mentioned order. h1
considered as the main
heading, it
is advised to have at least one h1
in the webpage for SEO.
Suppose you have headings in the below format,
<h1> My webpage </h1>
<h3> Less important section <h3>
In this case, the lighthouse audit will fail, because
h2
is missing and is expected between h1
and
h3
.
The sequential use of the headings will improve navigation for users and screen readers.
Lists
Assistive technologies like screen readers require yourli
elements to come under
ul
or ul
. This proper structure helps the assistive technologies to
understand how many items on the list.
<div>
<li> Item 1 </li>
<li> Item 2 </li>
</div>
Other checks
<html>
should have a [lang] attribute. Setting the default language will help the screen readers understand and read out the texts properly.- Interactive elements such as input elements, buttons, links should be keyboard focusable.
-
Use HTML5 elements such as
<main>, <nav>
to improve navigation and will improve keyboard navigation for assistive technologies.
And the results... 🎉
After all these implementations, we aced a perfect 100.
Get started with Raileo
Keeping an eye on your website uptime and performance is important. Get started with Raileo in less than 30 seconds
Start your free trialNo credit card required