Skip to content

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

License

Notifications You must be signed in to change notification settings

salil-naik/a11y.css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published