CSS Library For Accessibility Testing – Checka11y.css

Category: CSS & CSS3 , Recommended | October 21, 2021
0 Comment
Demo Download
Author:jackdomleo7
Views Total:112 views
Official Page:Go to website
Last Update:October 21, 2021
License:MIT

Preview:

CSS Library For Accessibility Testing – Checka11y.css

Description:

Checka11y.css is a pure CSS accessibility testing library to detect missing attributes and html tags needed for web accessibility.

Features:

  • Element highlighting.
  • Feedback messages.
  • Detects missing alt attributes on images.
  • Detects missing title attribute on <iframe>elements.
  • Detects missing lang attribute on <html> tag.
  • Checks <nav> only exists once on any page.
  • Checks <li> is the only child of <ol> and <ul>.
  • Checks <dt> and <dd> are the only children of <dl>.
  • Checks target="_blank" attribute and warns about links that open in a new window.

See Also:

How to use it:

Just download the package and insert the stylesheet checka11y.css into the document and done.

<link rel="stylesheet" href="../checka11y.css" />

More Previews:

Checka11y.css iframe has no title attribute

iframe has no title attribute

Checka11y.css Only a single navigation element should exist

Only a single navigation element should exist

Checka11y.css All images require an alt attribute

All images require an alt attribute

Changelog:

v2.0.0 (10/21/2021)

  • Dropped support for node-sass
  • Migrated away from the Sass @import at-rule to use the Sass
  • Refactored customisable !default Sass variables to be more specific

v1.1.0 (12/01/2020)

  • Check for & warn on use of underline element
  • Check for meaningful alt on images
  • Check for elements which aren’t <a> or <button> for mouse event handlers
  • Allow <script> and <template> to be direct children of <ul> and <ol>

10/03/2020

  • Fixed “an input” description, added brackets in “a button”

See Also:

You Might Be Interested In:

Leave a Reply