Road to an accessible website, with Lighthouse
6 months 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.
Below are a couple of things we'll be working on.
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
<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
is advised to have at least one
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
h2is missing and is expected between
h3. The sequential use of the headings will improve navigation for users and screen readers.
ListsAssistive technologies like screen readers require your
lielements to come under
ul. This proper structure helps the assistive technologies to understand how many items on the list.
<li> Item 1 </li>
<li> Item 2 </li>
<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.