Meet Sa11y, the accessibility quality assurance assistant. Sa11y is a customizable, framework-agnostic JavaScript plugin. Sa11y works as a simple in-page checker that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them. Sa11y is not a comprehensive code analysis tool; it exclusively highlights content issues.
Want to help translate or improve Sa11y? Consider contributing! Translations may either be contributed back to the repository with a pull request, or translated files can be returned to: adam.chaboryk@torontomu.ca. When submitting a pull request, please ensure you create your translated file within the /src/js/lang/
directory.
Have a question or any feedback? Email: adam.chaboryk@torontomu.ca
Sa11y is a framework-agnostic JavaScript plugin. It's made with vanilla JavaScript and CSS, and its only dependency is Tippy.js - a highly customizable tooltip library that features a positioning system.
To install on your website, insert Sa11y right before the closing </body>
tag. Sa11y consists of three files:
<head>
of the document (if possible).npm i sa11y
<!-- Stylesheet -->
<link rel="stylesheet" href="https://github.com/ryersondmp/sa11y/blob/master/css/sa11y.min.css"/>
<!-- JavaScript -->
<script type="module">
import { Sa11y, Lang } from '../assets/js/sa11y.esm.js';
import Sa11yLangEn from '../assets/js/lang/en.js';
// Set translations
Lang.addI18n(Sa11yLangEn.strings);
// Instantiate
const sa11y = new Sa11y({
checkRoot: "body",
// Customize with props.
});
</script>
<!-- Stylesheet -->
<link rel="stylesheet" href="https://github.com/ryersondmp/sa11y/blob/master/css/sa11y.min.css"/>
<!-- JavaScript -->
<script src="https://github.com/ryersondmp/sa11y/raw/master/dist/js/sa11y.umd.min.js"></script>
<script src="https://github.com/ryersondmp/sa11y/raw/master/dist/js/lang/en.umd.js"></script>
<!-- Instantiate -->
<script>
Sa11y.Lang.addI18n(Sa11yLangEn.strings);
const sa11y = new Sa11y.Sa11y({
checkRoot: "body",
// Customize with props.
});
</script>
Please visit developer documentation for CDN installation instructions.
A light server for development is included. Any change inside /src
folder files will trigger the build process for the files and will reload the page with the new changes. To use this environment:
npm install
npm run serve
. Then open http://localhost:8080/docs/demo/en/
in your browser.npm run test
while the server is running.Tip! To speed up compile time while developing, navigate to rollup.config.js
and change developmentMode
to true
. This will only compile javascript, SCSS, and English translation strings.