a11y.css ·

How it works?

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

Steps to follow

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

Understanding the error highlights

A11y Errors

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

Syntactical Errors

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

Image errors

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

Demos

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

What is accessibility and why is it important?

Read my blog post on Dev.to

Will this make my website 100% accessible?

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

Resources & Learning material