til / How to lint html using css

The following CSS rules will help you highlight potential semantic and accessibility (a11y) issues you might have on your website.

Missing alt attributes #

The alt attribute provides a fallback for images that aren’t able to load. The attribute is also important for a11y since screen readers will read the text to the user.

Rule of thumb: When choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there’s an image on the page.

Images without semantic meaning should have the alt attribute set to "".

/* Find images with missing alt attributes */
img:not([alt]) {
  outline: 2px dotted red;
}

Links without a destination #

This trick will highlight links that do not have an href attribute, an empty href, or an href set to #.

/* Links that go nowhere */
a:is(:not([href]), [href=""], [href="#"]) {
  outline: 2px dotted red;
}

Tabindex that’s not 0 or -1 #

Elements that use the tabindex attribute with a value other than 0 or -1 might disrupt the natural flow of the website. This might make navigating especially difficult for people who rely on assistive technology.

/* Potential tabindex problems */
[tabindex]:not([tabindex="0"], [tabindex="-1"]) {
  outline: 2px dotted red;
}

Invalid children in lists #

According to MDN, <li> is the only element, apart from <script> and <template>, that is semantically allowed inside <ul> and <ol>. This trick helps you spot any invalid elements.

/* Invalid list elements */
:is(ul, ol) > *:not(li) {
  outline: 2px dotted red;
}

Images with missing width and height #

Images that are missing width and height might cause page load jank and Cumulative Layout Shift (CLS) when the images are loaded.

/* Images without width and height */
img:not([width]):not([height]) {
  filter: blur(20px);
}