Linting HTML using CSS

- SAKET KUMAR

When HTML is written incorrectly, nothing much happens. Because of this, it's easy to have invalid, unsemantic, or unaccessible bits in markup without it being obvious.

Using CSS3 for highlighting issues in our HTML

Inline Styles

target any element on the page that has inline styles applied to it

*[style] { 
    border: 5px solid red; /* Style to make the elements noticeable */
}

Faulty or Missing Link Targets

These selectors will highlight any anchor elements that either do not have any href attribute at all, or have a meaningless one.

a:not([href]),  
a[href="#"],  
a[href=""],  
a[href*="javascript:void(0)"] { … }

Unaccessible Images

When "alt" attribute is missing, most screenreaders will read out the value of the src attribute instead which, of course, is not useful to the user and can in fact be confusing.

img:not([alt]) { ... }

Missing Document Language

"lang" attribute is a signal to screen readers what language the page is in, which can determine how the content of the page is read aloud.

html:not([lang]),  
html[lang=""] { ... }

Incorrect Character Set

This selector targets any meta character set tag that is not set to UTF-8.

meta[charset]:not([charset="UTF-8"]) { ... }

Unaccessible Viewport Attributes

This selector can be used to highlight unaccessible viewport meta attributes.

meta[name="viewport"][content*="user-scalable=no"],  
meta[name="viewport"][content*="maximum-scale"],  
meta[name="viewport"][content*="minimum-scale"] { ... }

Unlabelled Form Elements

This selector checks for form elements that do not have an ID, and label elements that are not explicitly linked to a form element using the for attribute.

input:not([id]),  
select:not([id]),  
textarea:not([id]) { ... }

label:not([for]) { ... }

Another type of labelling that is important for form elements is via the name attribute.

input:not([name]),  
select:not([name]),  
textarea:not([name]) { ... }

Empty Interactive Elements

This selector will highlight any links of buttons that have no HTML content inside them.

button:empty,  
a:empty { ... }

Unnecessary or Deprecated Attributes

We can use CSS selectors to highlight attributes in our HTML that are deprecated or no longer needed.

Further

We can create a bookmarklet to test our HTML pages
Create a node package out of it and integrate it in our development process using gulp/grunt.
We can also create a chrome extension out of this.