Checka11y.css - CSS stylesheet to quickly highlight a11y concerns

Getting started

To get started using Checka11y.css in your project, all you need to do is:

Install checka11y-css via CDN, npm or yarn
Ensure you're not using Checka11y.css in production

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).
Then import via HTML or CSS

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

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

Package manager (npm or yarn)

First, install it via npm

npm install checka11y-css --save-dev

Or, install it via yarn

yarn add --dev checka11y-css

Then, import it 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 (Expanded .css)

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

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

Using Angular?

👉 Go to ngx-checka11y

Drawbacks

Checka11y.css, just like any other accessibility tool, cannot test 100% of accessibility so consider using one or two more other accessibility tools for good coverage.
Checka11y.css is made with the intention to never be used in a production environment - it is only a developer/quality assurance tool - so be sure to never push this stylesheet to production.
Checka11y.css is a CSS-only accessibility tool so cannot be as smart with some more complex features.

Feedback and support

We appreciate any feedback, good or bad and are always looking for new ideas to improve the user experience (UX), developer experience (DX) and accessibility of the tool. You may want to consider:

Raising a GitHub issue
Contacting the author directly
Starring the GitHub repository
Mentioning 'Checka11y.css' in a README or footer
Share on social media

License

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 */

Checka11y.css is FREE for personal and commercial use.