Contact information

11381 Prosperity Farms Rd West Palm Beach, Florida(FL), 33410

We are available 24/ 7. Call Now.

Accessibility should be a top priority for developing new tech. There are many tools available to check whether or not your website is accessible. These tools can score and log accessibility errors that are present on your website. One of those tools is Lighthouse. Lighthouse is a free chrome extension that was developed by Google.

As stated on their website;

“Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.” (Lighthouse)

Lighthouse can be downloaded for free at the following link and can be used as a chrome extension. After downloading Lighthouse, you can run reports on specific web pages.

Steps to get started:

First, download Lighthouse as a chrome extension at this link. This chrome extension is free.

Once downloaded, you can pin it next to your browser. This will make it very easy to run the necessary tests.

Next, got to a page you want to audit. Click on the Lighthouse icon on your browser. Then click on “Generate Report”.

lighthouse extension
Screenshot of “Generate report” Lighthouse tooltip

After you click on Generate Report, Lighthouse will take a few minutes to generate a report for you. Lighthouse will open a new page that documents how well your page is.

lighthouse extension performance

lighthouse extension accessibility

Lighthouse scores 5 different aspects of your page; Performance, Accessibility, Best Practices, SEO and PWA. Developers can look at how their website scores in each of these categories. Today, we will look at accessibility.

To demonstrate Lighthouse, I’ve audited CSS-Tricks. On the CSS-Tricks home page, accessibility received a score of 97. You can scroll down to look at accessibility errors. CSS-Tricks home page has one accessibility error, which is, “Background and foreground colors do not have a sufficient contrast ratio. Underneath, it explains why this is an accessibility issue by stating, “Low-contrast text is difficult or impossible for many users to read”. Lighthouse even links a URL for the developer to learn more about this particular accessibility problem.

lighthouse extension audit
Screenshot of “Background and foreground colors do not have a sufficient contrast ratio” error shown on Lighthouse audit

In the screenshot above, you can see that Lighthouse took a screenshot of areas that have this accessibility problem, along with the code associated with this section. Lighthouse not only reports the accessibility error, but it also takes screenshots of which elements do not pass accessibility along with the correspondent code, why the problem is an accessibility error, and how to fix it. Lighthouse also allows users to learn more about the specific accessibility issue so they can prevent this issue from happening in the future.

We should be testing multiple pages when we run an accessibility audit because some pages might have problems others do not.

For example, CSS-Tricks home page only had one accessibility error. The article page had the “Background and Foreground colors do not have sufficient contrast ratio” error and another problem, which was “Heading elements are not in a sequentially-descending order”. Again, Lighthouse provided the error, explained why the issue occurred, showed where this was failing to help developers fix this accessibility error. Lighthouse explained this accessibility error, “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 technology.”

lighthouse extension heading
Screenshot of “Heading elements are not in a sequentially-descending order” error shown on Lighthouse audit

Tools like Lighthouse can help developers see accessibility errors that their page is generating. We can see the element’s accessibility is failing, we can learn about why the problem is occurring, and most importantly, we can learn how to fix it. These tools can broaden our understanding of accessibility.

These tooltips can improve our understanding of accessibility and can prevent future problems from occurring.

Read the original article on HackerNoon

Denial of responsibility! 1 World Directory is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected] The content will be deleted within 24 hours.

Leave a Reply

Your email address will not be published.