Checka11y.css

A CSS stylesheet to quickly highlight a11y concerns.

The first line of defence for testing accessibility.

Designed to quickly highlight some common accessibility errors and warnings that can be easily and quickly rectified.

Recommended before turning to automation tools and scanners such as Lighthouse on Chrome.

Remember not to push this to production!

A great tool for:

Websites and web applications to begin improving their accessibility.
Developers and testers/QA to learn more about accessibility and creating accessible websites and applications.

Lightweight • Modern • Accessibile • Customisable • Simple

Features

Our features are always checked against the W3C accessibility guidelines.

A list of common a11y concerns Checka11y.css will check for and highlight :

Check for invalid HTML elements nested inside of <a> and <button>
Check for missing alt attributes on images
Check for media that is set to autoplay
Check <li> is the only direct child of <ol> and <ul>
Check for programmable-only tabindex attributes on invalid HTML elements

See a full list of features here.

Other features:

Clear a11y errors and warnings with informative messages
Options to import via CDN, npm or yarn
Customise the error and warning colors
No dependencies

Usage

CDN

In the below CDN links:

Replace :version with a version listed here (latest version is always recommended). If you always want to get the latest stylesheet, remove @:version completely (Not recommended).

<!-- HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/checka11y-css@:version/checka11y.css" />

/* Or CSS */
@import url('https://cdn.jsdelivr.net/npm/checka11y-css@:version/checka11y.css');

Package manager (npm or yarn)

It's best practice to install Checka11y.css as a dev dependency rather than a dependency and ensure you only use it in your local/developer environment (do not push this stylesheet to your production environment). You can install checka11y-css via npm or yarn.

First install via npm

npm install checka11y-css --save-dev

Or install via yarn

yarn add --dev checka11y-css

Then import into your JavaScript

import 'checka11y-css';

Or import the SCSS or CSS into your Sass/SCSS In the below imports, replace :file with one of the options below:

src/checka11y _{^{(.scss file)}}
checka11y.css _{^{(.css file)}}

/* Webpack */
@import '~checka11y-css/:file';

/* Non-webpack */
@import 'path/to/node_modules/checka11y-css/:file';

Why is accessibility important?

Accessibility is important to ensure your website or web application is accessible to as many users and types of users you can cater for.

Often, we can improve the accessibility on our websites and web applications by focusing on the obvious first - these are small quick wins that are easy to implement or rectify and may not require a lot of time investment.

Checka11y.css will instantly highlight as many HTML validity and HTML semantic errors and warnings as we can, to help you to improve your website or web application.

Click here to read more about web accessibility.

License

Type - MIT

Read license

You have the right to use this library in any project FREE of charge for personal and commercial use.

Commercial use should consider a small donation on Buy Me a Coffee.

You do not have the right to resell, sublicense or redistribute (even for free) this library.

Checka11y.css is licensed under MIT. As a minimum, you are required to KEEP AND NOT REMOVE the following code at the beginning of your downloaded/installed Checka11y.css CSS, where :version is replaced with the version number you are using:

/*! Checka11y.css v:version | MIT License | github.com/jackdomleo7/Checka11y.css */

Contributing

Read CONTRIBUTING guidelines
git clone https://github.com/jackdomleo7/Checka11y.css.git or fork the repo
cd Checka11y.css
npm i
Edit src/**/*.scss and run npm run build in the root of the project to regenerate the CSS found at /checka11y.css (DO NOT edit this file directly).
To add error/warning styles and messages to your features, @extend one of the placeholders and @include contentMessage() from src/_base.scss.
Add tests to your features in Cypress (at a11y_spec.js)
Run tests: npm run cypress:open or npm run cypress:run (headless)

shreyashsingh-101 / Checka11y.css