The CSS file detects the accessibility and syntactical errors and highlights it on the website.

1. Link CSS file to your code

   <link
     href="https://cdn.jsdelivr.net/gh/salil-naik/a11y.css/a11y.css"
     rel="stylesheet"
     type="text/css"
   />

2. Solve the errors based on the suggestions given
3. Remove or comment the CSS file

A11Y errors will be highlighted with red colored text. The border of the highlighted elements will be turned black in color.

Syntactical errors will be highlighted with yellow-orange colored text. The border of the highlighted elements will be turned black in color;

Two image errors will be highlighted.

1. Missing or empty alt attribute
   This error will be highlighted by a black border around the image
2. Missing height and width attributes This error will be highlighted by a blured layer over the image

1. Demo 1
2. Demo 2
3. Demo 3

Read my blog post on Dev.to

No, there is no such thing as 100% accessible website. a11y.css will try to make the website as error free as possbile. In addition to using a11y.css, we recommend you to go through A11Y Checklists by a11yproject.com