Totally Automated Accessibility Scanner, or Totally for short (a play on this project's origin tota11y), is an automated accessiblity auditing tool that runs in your browser and is designed to help you identify a number of accessibility concerns relating to the comprehensive guidelines maintained by the WC3 in the WCAG without prior accessibility knowledge to make sense of the results.
Totally was built as part of a 3rd year Computer Science Dissertation project on Web Accessibility testing.
Totally is a WebExtension for Mozilla Firefox built from the bookmarklet tota11y created by Khan Academy. Due to keeping plugin compatibility Totally should also still function as a bookmarklet in the same way as the original, but this is not the intended use.
Installation steps
git clone https://gitlab.com/skeletonxf/totally-automated-a11y-scanner
cd totally-automated-a11y-scanner/
npm install
npm run dev
# Go to about:debugging in Firefox
# load addon/manifest.jsonAll node package dependencies are for build time only. As the builds are committed to enable bookmarklets you only need to run npm if you start editing the code. This project also includes a release.sh script for reproducible builds and creation of zip files for submission to the Firefox addons site.
The following sections are derived from tota11y's help page.
Most of the functionality in tota11y comes from its plugins. Each plugin
gets its own directory in plugins/ and maintains its own JavaScript, CSS,
and even handlebars. Here's what the simple LandmarksPlugin looks like.
plugins/shared/ contains a variety of shared utilities for the plugins, namely the info-panel and annotate modules, which are used to report accessibility violations on the screen.
index.js brings it all together.
tota11y uses a variety of technologies, including jQuery, webpack, babel, and JSX. There's no need to know all (or any!) of these to contribute to tota11y, but we hope tota11y is a good place to learn something new and interesting.
Totally adds:
settings/ for settings in a very similar style to plugins.
addon/ for the WebExtension code.
public/ for the publicly available help page on Gitlab Pages.
toolbar.js for enabling the plugins from the sidebar of the browser
plugins/shared/info-panel/controller.js for interacting with plugins from the sidebar.
and many more plugins testing accessibility criteria.
Further elaboration on the addon architecture is in ARCHITECTURE.md.
You can run unit tests on totally (as a bookmarklet) with the following:
npm testOr lint the source code with:
npm run lintFIXME live testing the bookmarklet
If you include the tota11y.js or tota11y.min.js file into a webpage it will still function with limited functionality as a single script. If you do this you may also want to add additional scrolling styling to the toolbar as the script has far more categories than when tota11y was developed and consequently takes up a lot of vertical screen space you may not have.
#tota11y-toolbar .tota11y-toolbar-body ul.tota11y-plugins {
max-height: 90vh;
overflow-y: auto;
scrollbar-color: #555 #f2f2f2;
}Many plugins and much code in general comes from tota11y by Khan Academy. In turn many of those features come from Google Chrome's Accessibility Developer Tools. You will still see tota11y mentioned all over this project if you inspect the CSS names and the code.
Google Chrome Accessibility Developer Tools is licensed under the Apache License 2.0 and other libraries like jQuery are similarly licensed under permissive licenses.