Road to an accessible website, with Lighthouse

9 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 them

https://www.w3.org/WAI/fundamentals/accessibility-intro/

In 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.
accessibility score before changes raileo

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.

contrast checker tool for accessibility

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>

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.
lighthouse accessibility score results - raileo
You can also use tools like Userway to provide extensive accessibility features to your website visitors.

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 trial

No credit card required

s