DEV Community

Cover image for Lighthouse Accessibility Update
Lucia Cerchie
Lucia Cerchie

Posted on

3 1

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)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay