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
BETA coming soon!
Our features are always checked against the W3C accessibility guidelines.
A list of every a11y concern Checka11y.css will check for and highlight:
- Missing
altattributes on images - Missing
titleon<iframe> - Checks
<li>is the only child of<ol>and<ul> - Checks if
<nav>exists more than once on a page, that each nav is correctly labelled. - Missing or empty
langon<html> - Checks
<a target="_blank">and warns about links that open in a new window - Checks
<dt>and<dd>are the only children of<dl> - Checks for the following invalid HTML elements nested inside of an :
<a><audio controls><button><details><embed><iframe><img usemap>any input without type hidden<keygen><label><menu type="toolbar"><object usemap><select><textarea><video controls>
Other features:
- Clear a11y errors and warnings with informative messages
- Options to import via CDN, npm or yarn
- Customise the error and warning colors
- Customise the font used for error and warning messages
- No dependencies
Coming soon...
Watch this repository to stay up to date.
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.
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 */- Read CONTRIBUTING guidelines
git clone https://github.com/jackdomleo7/Checka11y.css.gitor fork the repocd Checka11y.cssnpm i