Road to an accessible website, with Lighthouse

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 your li 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>