Checka11y.css

About Checka11y.css

Checka11y.css is a CSS stylesheet that highlights accessibility issues directly in a webpage by visually flagging elements that violate common W3C accessibility guidelines. It detects issues such as invalid HTML nested inside anchor and button elements, missing alt attributes on images, autoplaying media, incorrect direct children of ordered and unordered lists, and programmable-only tabindex attributes on invalid elements. Each flagged issue displays an error or warning code that corresponds to an entry in the project's codes.md file, which explains the problem and how to resolve it.

It is intended for use during development and testing, not in production. It can be added via CDN, or installed as a dev dependency through npm or yarn, with support for import into JavaScript or Sass/SCSS. Separate stylesheets are available for errors only, warnings only, or both combined, along with minified versions. The tool is aimed at developers and QA testers working on websites and web applications who want to catch common accessibility problems before turning to automated scanning tools. It is also distributed as a Chrome Web Store extension and a Firefox add-on, and an Angular-specific version (ngx-checka11y) is available separately. The project is licensed under MIT.

Key features

• Highlights common accessibility issues directly in CSS by visually flagging offending elements
• Flags images missing alt attributes
• Detects autoplaying media
• Detects programmable-only tabindex attributes on invalid HTML elements

Frequently asked questions