My Lighthouse Accessibility score is 100%. Does that mean my website is 100% accessible?

My Lighthouse Accessibility score is 100%. Does that mean my website is 100% accessible?

Savvas Stephanides's photo
Savvas Stephanides
·Jul 19, 2022·

4 min read

Table of contents

  • About
  • 1. Images and alt text
  • 2. Link text
  • 3. Links that should be buttons
  • 4. Buttons that should be links
  • 5. Titles
  • 6. lang
  • 7. Keyboard focus
  • Conclusion

About

Since Google launched Lighthouse, they have helped countless website owners check their products for things like performance and SEO.

One of the most important and often overlooked metric of a website is how accessible it is. Lighthouse also great at giving an assessment of how accessible your website is.

Once Lighthouse finishes the testing, it gives you a percentage of how accessible a site is, 100% meaning that all tests pass.

But does that mean that that a 100% Accessibility report mean that your site is 100% accessible?

No. The answer is no. Here's why:

1. Images and alt text

Does your image lack an alt text? Google Lighthouse will happily remind you.

Does your image have an alt text? Lighthouse will gracefully give you a green check of approval.

But... will the text fail if you added an inappropriate alt text?

<img src="burger.jpg" height="210px" alt="Yum yum!" />

No. No it won't.

💡 Make sure you have alt text that's suitable for the image and its context within the article.

If your link doesn't have some text it can announce:

<a href="/home"></a>

Lighthouse will informatively tell you so.

If your link does have text, it will also tell you and reward you with a higher score.

But... will it tell you if the text for the link isn't appropriate and doesn't define expectations for your user?

<a href="/home">Click here</a>

No. No it won't.

See this a tag:

<a onclick="alert('Hello')" >Click here</a>

For accessibility reasons, this should have been a button, since it runs a Javascript line and the user expects to go to a different page or part of the same page. What does Lighthouse say about this?

Nothing. All clear!

Now check this line:

<button onclick="window.location.href='/about'">About me</button>

It's a button element that takes the user to a different page. That's an element that should have been a link. What does Lighthouse say about this?

Nothing. Once again we're all clear.

5. Titles

Titles are important for the user to understand the context of a web page. Lighthouse will gladly tell you if your page doesn't have a title element.

But what if the title value is irrelevant to the page?

<title>This is a title just to get 100% of Lighthouse 😈</title>

Lighthouse will pass the title check, saying that as long as there's something in the title tag, you're good to go.

6. lang

If your html tag, doesn't have a lang attribute:

<html>

The Lighthouse test will fail and helpfully remind you to include it.

Even if you include a lang attribute but with an invalid value (ie. a language that doesn't exist):

<html lang="bb">

Lighthouse will help you by guiding you towards adding a correct locale.

But what if the lang attribute has one language, but your page is in another?

<!DOCTYPE html>
<!-- 👇 The lang attribute shows the page is in English... -->
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>This is a title just to get 100% of Lighthouse</title>
</head>
<body>
    <!-- ... but this page is in Greek! 👇 -->
    🇬🇷 Αυτή η σελίδα είναι στα Ελληνικά! 
</body>
</html>

Lighthouse will gladly give you a 100% score and pass both checks for lang.

image.png

7. Keyboard focus

Suppose you have some navigation on your page:

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/blog">Blog</a>
</nav>

And for some reason, you decided to disable any kind of focus indication on them:

a:focus{
    border: 0;
    outline: 0;
}

A keyboard user will have no way of knowing which link has the focus at any time. This is an accessibility no-no. Will Lighthouse let you know about this?

No, but it will let you know that you'll need to manually check this under the "Additional items to manually check" section.

Conclusion

Although Lighthouse is a great tool for spotting accessibility (and other) errors in your web page, a 100% accessibility score, does not mean your web page is 100% accessible. You'll still need to make sure that your text is relevant to the element and your elements behave like they're supposed to.

See this helpful guide on how to check for accessibility on your website!

Did you find this article valuable?

Support Savvas Stephanides by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this