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>
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)