salil-naik / a11y.css

The CSS file detects the accessibility and syntactical errors and highlights them on the website.
MIT License
23 stars 14 forks source link
a11y a11y-testing css hacktoberfest syntactical-errors

a11y.css · Open Source Love GitHub license jsDelivr Hits

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

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