A set of CSS rules to visually highlight common markup mistakes.

debug.css

/*
  In any of the following scenarios, a critical attribute was left off and needs
  to be corrected.
*/
abbr[title=''],
abbr:not([title]),
a[href=''],
a[href='#'],
a:not([href]) {
  color: var(--color-red-500) !important;
}

/*
  If an image is completely missing an `alt` attribute, blur it to the point of
  being unreconizable so the experience for sighted visitors is the same as that
  of visually impaired visitors.
*/
img[alt=''],
img:not([alt]) {
  filter: blur(10px);
}

/*
  Add a visually-obtrusive border to any immediate parent elements containing
  an image without proper alternate text.
*/
*:has(> img[alt='']),
*:has(> img:not([alt])) {
  border-radius: 8px;
  border: 4px dotted var(--color-red-500);
}

/*
  In all of these cases, display helpful text for correcting the issue.
*/
*:has(> img[alt='']):after,
*:has(> img:not([alt])):after,
abbr[title='']:after,
abbr:not([title]):after,
a[href='']:after,
a[href='#']:after,
a:not([href]):after {
  font-family: var(--mono);
  font-weight: bold;
  font-size: var(--step--1);
  background-color: var(--color-red-500);
  color: var(--color-white);
  display: inline-block;
  border-radius: 4px;
  margin-inline-start: var(--space-2xs);
  padding: var(--space-4xs);
}

a[href='']:after,
a[href='#']:after,
a:not([href]):after {
  content: '[Useless HREF]';
}

abbr[title='']:after,
abbr:not([title]):after {
  content: '[Missing Title]';
}

/*
  Since :after won't work with img elements, use the containing element to add
  the text explanation.
*/
*:has(> img[alt='']):after,
*:has(> img:not([alt])):after {
  content: '[Missing Alternate Text]';
  margin: var(--space-s);
}