Will Mendes has a bit of CSS to highlight accessibility issues on HTML elements. Things like missing alt text and labels that aren’t linked properly to inputs. If you want to try it out quick on a website, I wrapped it in a little injection JavaScript so you could paste it in the console wherever.
Console Code
document.head.insertAdjacentHTML("beforeend", `<style>html:not([lang]),
html[lang=""] {
border: 2px dotted red !important;
}
/* highlight images missing alt text */
img:not([alt]) {
filter: blur(5px) !important;
}
/* highlight on all elements that are inside of lists but not a list item <li> and displays them with a red outline.*/
:is(ul, ol) > *:not(li) {
outline: 2px dotted red !important;
}
/* highlight on links without valid href attribute */
a:not([href]),
a[href="#"],
a[href=""],
a[href*="javascript:void(0)"] {
outline: 2px dotted red !important;
}
/* highlights label with invalid for attribute */
label:not([for]),
label[for="#"],
label[for=""] {
border: 2px dotted red !important;
}
/* Avoids div buttons from hell. More details in https://www.htmhell.dev/2-div-with-button-role/ */
div[role="button"] {
color: red;
text-decoration: blink !important;
}
/* highlight on empty anchors/buttons */
button:empty,
a:empty {
border: 2px dotted red !important;
}</style>`);Code language: HTML, XML (xml)Not that you should be pasting code that strangers give you into the console. But ya know, we’re cool.
