Linda Ojo

How to Improve Lighthouse Score - Accessibility

Published: 2020-12-07
preview-image

This article is part of the lighthouse series. You can check out other Lighthouse articles below:


Don't know how to check your website's Lighthouse score? No problem, use this article How to Check Lighthouse Scores using Chrome or Firefox as a guide.

In this post, I will be sharing great tips on how to get a perfect lighthouse score in accessibility.

You should know, accessibility is very important and spans beyond the audits of Lighthouse. Do not rely solely on Lighthouse to rate the accessibility of your website. Only a subset of accessibility issues can be automatically detected by Lighthouse so manually testing is encouraged.

Ensure all elements have sufficient contrast ratio

Elements whose brightness is too close to the background brightness have a low contrast ratio. Elements with a low contrast ratio are hardly visible.

The button below has good contrast with its inner text but poor contrast with its background.

Low Contrast

We can improve the background contrast by changing the button's color or adding a border with the appropriate color as shown below.

No Contrast

Chrome lets you know the contrast ratio of elements when inspecting.

Contrast

Use tabindex to improve experience for keyboard users

Try to go through your website using the keyboard only, is it difficult? are there processes you can't carry out? If yes, you got some work to do.

Elements like Buttons and links can be accessed using a keyboard by default. You can add focus to other useful elements by setting tabindex = "0".

tabindex="0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order but places the element in the logical navigation flow as if it were a link/button on the page. This comes in handy for elements like icons which are not part of the natural tab order.

Do not set a tabindex="1" or any value greater than zero. It removes an element from the natural tab order.

Add a title element

The title gives users of screen readers and other assistive technologies an overview of the page. The title is the first text that an assistive technology announces. Search engine users also rely on the title to determine whether a page is relevant to their search.

Use a unique title for each page. Your title should also be descriptive, avoid using vague titles like "Home".

Title Element
<head>
    <title>Linda Ojo</title>
</head>  

Add a "lang" attribute to

Screen readers use a different sound library for each language they support, to ensure the correct pronunciation of words. Screen readers can switch between these language libraries easily, but only if a web page specifies which language to read for a given piece of content.

If a page doesn't specify a language for the element, a screen reader assumes the page is in the default language that the user chose when setting up the screen reader, often making it impossible to understand the content.

For example, this code below sets the language of the document to English:

lang attribute
<html lang="en">

Order heading elements properly

Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies.

Make all heading elements follow a logical, numerical order that reflects the structure of your content. Your heading text should clearly convey the content in the associated section.

For example:

Title Element
<div>
    <h1>Colors</h1>
    <section>
    <h2>Primary Colours</h2>
    ā€¦
        <h3>Red</h3>
    </section>
</div> 

Add alternative text to images

All images should have the alt attribute which contains a short descriptive text. If the image acts as decoration and does not provide any useful content, give it an empty alt="" attribute.

This is very important as visually impaired users using screen readers will be read an alt attribute to better understand an on-page image. These attributes are also displayed in place of an image that fails to load.

Alternative texts
<!-- Do -->
<img src="background.png" alt=""> <!--decorative image -->
<img src="dancers.png" alt="4 female dancers in yellow dresses"> <!-- informative image-->

Call to Action Elements should have descriptive text

Call to Actions (CTA) are elements that can be triggered by the user to achieve a goal. Examples of CTAs are buttons, links, icons etc

Lighthouse flags generic CTA texts such as "click here", "go", "start", "more", "learn more" e.t.c. Using descriptive text for CTA elements will help screen readers understand your content.

Links
<!-- Don't  -->
āŒ <p>To load more pictures, <a href="/articles">click here</a>.</p> 

<!-- Do -->
āœ… <p><a href="/articles">Load more pictures of Schrute Farms</a>.</p> 

Always place list items within a parent element

When assistive technologies come to a list, they notify users how many items are within the list. If you don't wrap list items in a parent list element, assistive technologies can't set user expectations correctly.

Lighthouse flags list items that aren't contained in parent elements. Always place your list items in parent elements as shown below.

List items
<!-- Unordered list -->
    <ul>
        <li>Green</li>
        <li>Blue</li>
        <li>Yellow</li>
    </ul>
<!-- Ordered list -->
    <ol>
        <li>Antelope</li>
        <li>Bat</li>
        <li>Cheetah</li>
    </ol>

The tips above will definitely boost your lighthouse accessibility score and make it easier for anyone to use your website.

Subscribe to Newsletter

Be the first to know about quality articles and poems written by Linda Ojo.