Skip to content

jackdomleo7/Checka11y.css-browser-extension

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Checka11y.css logo

MIT License GitHub manifest version (path)

GitHub stars Chrome Web Store Mozilla Add-on


👉 Click here to go to the original Checka11y.css project


Checka11y.css - browser extension

A CSS stylesheet to quickly highlight a11y concerns.

LightweightModernAccessibileCustomisableSimple

Designed to quickly highlight some common accessibility errors and warnings that can be easily and quickly rectified.

This is the browser extension for Checka11y.css. It allows you to toggle on and off the Checka11y.css stylesheet on any webpage so you can debug your webpage's accessibility.

Browsers supported:

GIF example of Checka11y.css browser extension in use by toggling on and off the Checka11y.css stylesheet.
Light theme Dark theme
Checka11y.css light theme Checka11y.css dark theme

Dev

Prerequisites
npm i -g web-ext
Debug the extension in Firefox
web-ext run

OR

  • In Firefox, navigate to about:debugging
  • Click "This Firefox"
  • Click "Load Temporary Add-on" and choose the directory Checka11y.css-browser-extension
Debug the extension in Chrome
  • In Chrome, navigate to chrome://extensions
  • Enable Developer mode
  • Click "Load unpacked extension" and choose the folder Checka11y.css-browser-extension
Package up the browser extension ready for publishing
web-ext build