Accessibility using LightHouse
Hi everyone, this is my first Medium story since I started my internship at the Washington Post. Since I started, I have been learning a ton, and I am writing today about Accessibility.
There are so many tools to improve the Accessibility for screen readers, such as LightHouse and Wave. In this article, I will talk about a couple of issues I worked on to improve Accessibility.
First, why does it matter to improve Accessibility for screen readers?
When websites and web tools are properly designed and coded, people with disabilities can use them. However, currently many sites and tools are developed with accessibility barriers that make them difficult or impossible for some people to use.
Making the web accessible benefits individuals, businesses, and society. International web standards define what is needed for accessibility.
Now let’s talk about a Chrome developer tool I used to improve Accessibility called LightHouse, an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more.
You can read more about LightHouse and use it at the link I listed in the resources, but now I will dive deep into 2 issues I have worked on and how LightHouse helped me audit the web page to have 100% Accessibility!
1- Navigation: Heading elements are not in a sequentially-descending order
Screen readers have commands to jump between headings or to specific landmark regions quickly. In fact, a survey of screen reader users found that they most often navigate an unfamiliar page by exploring the headings.
Using correct heading and landmark elements can dramatically improve the navigation experience on your site for users of assistive technologies.
Example how this is how the audit failed:
using an <h1> element for your page title and then using <h3> elements for the page's main sections will cause the audit to fail because the <h2> the level is skipped:
<h1>Page title</h1>
<h3>Section heading 1</h3>
…
<h3>Section heading 2</h3>
…- To pass this audit, you can change the
<h3>tag to an h2, or turn it to a<div>
2- Names and labels: Links do not have a discernible name. Now that was a tough one.
LightHouse is looking at this <a> tag, needs a unique name or attribute to pass the audit for better Accessibility. Therefore, after researching around, I found the aria-label attribute that solves the problem.
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use aria-labelledby instead.
This attribute can be used with any typical HTML element; it is not limited to elements that have an ARIA role assigned.
The aria-label needs something a descriptive string, such as the name of the article or author.
I hope this was helpful!
Resources:
