DEV Community

Cover image for Lighthouse Accessibility Update
Lucia Cerchie
Lucia Cerchie

Posted on

Lighthouse Accessibility Update

Lighthouse recently released v 9.0. Along with a cool new user flow API and other updates, related accessibility elements with repeated aria-labelledby ids are listed out.

This is super helpful for me! Time was, I would have duplicated ids in my code like so:

<h1 id="blue-title"> Title! </h1>
<p id="blue-title"> </p>
<p id="blue-title"> </p>
Enter fullscreen mode Exit fullscreen mode

But Lighthouse would only show the pictured warning for <h1> so I assumed it was the only one causing the warning, which confused me.

Now it lists out all the elements causing the error, making it clear where the duplicated ids are.

Psssst, helpful hint: If you've been using an id to apply a CSS class, and that's why you duplicated it -- switch to a class!

Top comments (0)