Checka11y.css

A CSS stylesheet to quickly highlight a11y concerns.

npm install checka11y-css --save-dev
GitHub stars GitHub stars GitHub release (latest by date) Latest release
View demo View features
Checka11y.css - A CSS stylesheet to quickly highlight a11y concerns. | Product Hunt Join us on Product Hunt

Getting started

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

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

Usage

CDN

jsDelivr hits (npm)

In the below CDN links:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]:version/checka11y.css" />
@import url('https://cdn.jsdelivr.net/npm/[email protected]:version/checka11y.css');

Package manager (npm or yarn)

npm downloads npm downloads

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:

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

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

Drawbacks


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:


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.

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