Checka11y.css

Getting started Link to section

Get started in seconds and make your website more accessible. Checka11y.css helps you identify common accessibility issues during development:

1. Install checka11y-css via CDN, npm, or yarn
2. Include the stylesheet in your development environment
3. Remove it before deploying to production

Usage Link to section

🚀 Quick Start with CDN

Fastest way to get started! Add Checka11y.css to any website instantly:

• Replace :version with a specific version number (opens in new tab) (recommended for stability)
• For the latest version, remove @:version entirely (not recommended for production use)

<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');

📦 Install with Package Manager

npm downloads

npm install checka11y-css --save-dev

yarn add --dev checka11y-css

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';

🅰️ Angular Integration

Building an Angular app? Use our dedicated Angular package: ngx-checka11y (opens in new tab)

Drawbacks Link to section

• Comprehensive testing: Checka11y.css catches many common issues, but combine it with other accessibility tools for complete coverage of WCAG guidelines.
• Development only: This tool is designed for development and testing environments. Always remove it before deploying to production to avoid affecting user experience.
• CSS limitations: As a pure CSS solution, some advanced accessibility checks require JavaScript-based tools for deeper analysis.

License Link to section

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.