Road to an accessible website, with Lighthouse

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 them
https://www.w3.org/WAI/fundamentals/accessibility-intro/

Lighthouse tool provides insights to how accessible your website is. In this post we go through some of those points and test it on websites.

You can start monitoring your website accessibility using Raileo

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 importance in the 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>

Other checks

• 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 , to improve navigation and will improve keyboard navigation for assistive technologies.

And the results... 🎉

This post was originally published in Raileo.