A CSS stylesheet to quickly highlight a11y concerns.
A CSS stylesheet to quickly highlight a11y concerns.
Lightweight • Modern • Accessibile • Customisable • Simple
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:
Our features are always checked against the W3C accessibility guidelines.
A list of some common a11y concerns Checka11y.css will check for and highlight :
<a>
and <button>
alt
attributes on imagesautoplay
<li>
is the only direct child of <ol>
and <ul>
tabindex
attributes on invalid HTML elementsSee a full list of features here.
Other features:
When using Checka11y.css, you will notice some codes prefixed with either "E" or "W". E.g.
If you wanted more details on this error and how to resolve it, you can reference the codes.md file and find the code "E0006".
Read our migration guide on migrating from v1 to v2.
In the below CDN links:
: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).:stylesheet
with one of the listed stylesheets below:
checka11y.css
(errors & warnings, recommended)
checka11y.min.css
(minified errors & warnings, recommended)
checka11y-errors.css
(errors only)
checka11y-errors.min.css
(minified errors only)
checka11y-warnings.css
(errors only)
checka11y-warnings.min.css
(minified errors only)
<!-- HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/checka11y-css@:version/:stylesheet" />
/* CSS */
@import url('https://cdn.jsdelivr.net/npm/checka11y-css@:version/:stylesheet');
It is 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)
src/errors/checka11y-errors
(errors only)
src/warnings/checka11y-warnings
(warnings only)
Use as a Sass module (recommended):
/* Webpack */
@use '~checka11y-css/:file' as *;
/* Non-webpack */
@use 'path/to/node_modules/checka11y-css/:file' as *;
Import generally (not recommended, read why):
/* Webpack */
@import '~checka11y-css/:file';
/* Non-webpack */
@import 'path/to/node_modules/checka11y-css/:file';
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.
Type - MIT
You have the right to use this library in any project FREE of charge for personal and commercial use.
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 */
This project uses npm ≥ 8 and Node ≥ 18 - however any project using this package does not need these versions, they can use any version of npm & Node.
git clone https://github.com/jackdomleo7/Checka11y.css.git
or fork the repocd Checka11y.css
npm i
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).@extend
one of the placeholders and @include contentMessage()
from src/_base.scss
.npm run test:ui
or npm run test
(headless)npm run test -- --spec cypress/e2e/{file-to-test}
GitHub • npm • yarn • docs • CHANGELOG • License • Chrome Web Store • Firefox add-on