I think I got this idea from Katrina awhile back, but perhaps we should offer a class like <html class="debug"> that helps authors avoid some common accessibility pitfalls. The following is a copy/paste of my current styles, not necessarily the implementation we'd use:
article:not(:has(h1, h2, h3, h4, h5, h6)),
fieldset:not(:has(legend)),
figure:not(:has(figcaption)),
section:not([role]):not([aria-label], [aria-labelledby]),
form:not(search > form):not([aria-label], [aria-labelledby]),
table:not(:has(caption)):not([aria-label], [aria-labelledby]),
search > form:not([aria-label], [aria-labelledby]) {
background: initial !important;
}
img:not([alt]) {
filter: invert() !important;
}
label:not([for]),
input:not([name], [id]) {
color: red !important;
}
.iconbutton:not([title], [aria-label]) {
background: red !important;
color: red !important;
}
.print-only:not([aria-hidden="true"]) {
background: red !important;
}
I think I got this idea from Katrina awhile back, but perhaps we should offer a class like
<html class="debug">that helps authors avoid some common accessibility pitfalls. The following is a copy/paste of my current styles, not necessarily the implementation we'd use: