The CSS file detects the accessibility and syntactical errors and highlights it on the website.
- Link CSS file to your code
<link href="https://cdn.jsdelivr.net/gh/salil-naik/a11y.css/a11y.css" rel="stylesheet" type="text/css" />
- Solve the errors based on the suggestions given
- 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.
- Missing or empty alt attribute This error will be highlighted by a black border around the image
- Missing height and width attributes This error will be highlighted by a blured layer over the image
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
| Title (with link) | Author/Publication |
|---|---|
| What is Accessibility and why is it important? | Salil Naik |
| Accessibility - Material Design | Material.io |
| Web Content Accessibility Guidelines (WCAG) 2.1 | W3C |
| Web Accessibility Podcasts Roundup | Digital Ally by Raghavendra Satish Peri |
| Accessibility Tips for Web Developers | Dev.to by Addy Osmani |
| A11Y — Making web accessibility easier | Thought Works |
| 8 tools that make accessible design easier | InVision |
| Accessibility tips on Twitter | Neha Sharma |
| Accessibility | MDN web docs |
| Web Accessibility For Beginners | DigitalOcean Communinty |
| Color Theory and Contrast Ratios | Christopher Schmitt |
| WebAIM | Center for Persons with Disabilities @ Utah State University |
| Color Safe | Donielle Berg & Adrian Rapp |
| Microsoft Accessibility Technology & Tools | Microsoft |
| Who Can Use - A Color Contrast Tool | Corey Ginnivan |