You are now in the main content area

Sa11y is an accessibility quality assurance tool 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.

Features

Sa11y works as a simple in-page checker that is designed to be easily customized and integrated into any content management system (CMS) to facilitate good accessibility practices. Sa11y works best in a templated CMS environment, although is also available as a bookmarklet. Sa11y is not a comprehensive code analysis tool. Sa11y exclusively highlights content issues.

  • Over 50 test conditions.
  • Free and open source.
  • Concise tooltips explain issues right at the source.
  • Low tech: No complex API or integrations.
  • Easily customizable: add your custom rulesets.
  • Automatic: checks content on page load.
  • Additional (toggleable) checks: Contrast, form labels, readability, links (Advanced).
  • Dark mode.

Made for content authors

Illustration of a gauge pointing to a content author instead of a web developer.

Automatic

Sa11y does a quick scan on page load. If there are any errors or warnings, the toggle will display a notification badge with the total number of issues detected. Red indicates errors, while yellow indicates there are warnings only. Content authors should be encouraged to enable Sa11y even if there are no notifications!

Three Sa11y toggles: one with a red notification badge, one yellow, and one without any badge.

States

Sa11y has three simple states.

Screenshot of panel that shows: 4 accessibility errors and 3 warning detected!

Errors

Accessibility and usability issues are detected. Sa11y highlights common WCAG 2.1 Level A and AA accessibility issues.

Screenshot of panel that shows: Please review warning.

Warnings

Warns you of potential accessibility or usability issues, and prompts you to manually review an element.

Screenshot of panel that shows: No accessibility errors found.

Pass

No apparent accessibility or usability issues are detected. A "thumbs up" to let you know you're good.

View all checks

Sa11y checks for the following content related issues and warnings.

Errors
  • Images
    • Missing alternative text.
    • Alt text contains a file extension.
    • Alt text contains only placeholder text.
  • Links
    • Nondescript link text like "learn more" or "click here".
    • Empty hyperlinks.
    • Links that only contain an icon font without an accessible name or label.
  • Tables
    • Missing table headers.
    • Empty table headers.
    • Table contains semantic headings.
  • Headings
    • Headings that skip levels.
    • Page does not start with a Heading 1 or Heading 2.
    • Empty headings.
    • Missing Heading 1.
  • Poor text contrast.
  • Inputs missing labels.
  • Page language not declared.
Warnings
  • Headings
    • Blockquotes incorrectly used as headings.
    • Headings that are too long (Not a WCAG 2.1 requirement).
    • Bolded text used as headings.
  • Images
    • Hyperlinked images: ensure alt text describes link location.
    • Images containing redundant words in alt text like "image of" or "graphic of".
  • Use of ALL CAPS/Uppercase.
  • Contrast that cannot be programatically determined, such as text with an image background.
  • Closed captions for videos.
  • Transcripts for podcasts and audio content.
  • Check PDF for accessibility or recommend to convert into HTML.
  • Links (Advanced)
    • Links that open in a new tab without warning.
    • Links with identical names should have an equivalent purpose.
    • Links to PDF and other files without warning.

Show Outline

The Show Outline button displays the page's heading structure, similar to the table of contents for a book. The page outline gives you a visual idea of how each part is interconnected.

Screenshot of the Page Outline panel with hierarchy issues.
Screenshot of the Page Outline panel with a clean, good heading hierarchy.

Show Settings: additional checks

Sa11y has four optional checks and a dark mode setting that can be enabled in the "Show Settings" tab. Although these checks are "optional", it does not imply they are not important! Depending on the website theme, plugin, or CMS, they may not need to be tested for every time. For example, some form plugins automatically provide a label for each form input.

Screenshot of settings panel in dark mode showing toggles for contrast, form labels, links (advanced), readability and dark mode. There is also a tooltip warning about links that open in a new tab without warning.
  • Contrast
    • Checks the contrast of various text elements.
  • Form labels
    • Checks all form inputs for a corresponding label.
    • Usability recommendation to remove "Reset" buttons on forms.
  • Links (Advanced)
    • Links that open in a new tab without warning.
    • Links with identical names should have equivalent purpose.
    • Links to PDF and other files without warning.
  • Readability
    • Estimates the readability score of all paragraph and list content.

Readability

Sa11y can estimate the readability score from all paragraphs and list content within the main content area. A good readability score is an indication that your writing is understandable and easy to digest. It is based on the average length of sentences and words on your page, using a formula known as the Flesch reading-ease test (Wikipedia).

A "good" reading score is between 60 and 100. Sometimes it may be difficult to achieve a good readability score. Most of your pages may say "difficult". Remember that this feature is only used to estimate the readability of your content. It should only be used as a reference, and not an indication of conformance.

You can enable the readability feature in the settings panel.

Tips to improve score

  • Keep sentences around 15 words on average.
  • Avoid sentences greater than 25 words.
  • Split long sentences up, or use bullet points.
  • Avoid complex words or words with many syllables.

Technical details about readability score

Sa11y calculates the readability score based on all paragraph (<p> tags) and list content (<li> tags). A low score does not affect the pass or fail state of Sa11y. This feature works for English content only (at the moment).

Screenshot of the Readability panel within Page Outline. Readability section shows the score out of 100, difficulty, average number of words per sentence, percentage of complex words, and total words.

Quality assurance

Creating an inclusive experience requires intention. Content authors have the ability to easily review their work. For example, Sa11y does not only flag images missing alternative (alt) text, but content authors can also easily review the alt text on images for relevance and quality. Sa11y has several test conditions to ensure alt and link text follow best practices.

Screenshot of two images. One with a Good button, and the other with an Error button and red border. Long description below.

The first image has a Good button with a tooltip that says: Good, the alt text for this image is: "Large mountains of sand in the Nambia desert. The second image is a flower with a red error border whose tooltip says: Error, non descript or placeholder alt text within the linked image found. Ensure the alt text describes the destination of the link.

Demo

Click the toggle to get started. Navigate to different pages to view all three states. Once enabled, Sa11y will remain on even when navigating to different pages. Simply click the same button to turn off Sa11y.

Skip iFrame Demo
View the demo in a new tab!

Install

Bookmarklet Experimental

Please note that bookmarklets do not work on all websites because of security policies that block external code. Secondly, it may take a few seconds to load because the code is being injected into the page you are browsing.

  1. Simply drag the "Sa11y" button below into your bookmarks bar.
  2. Click the bookmark on any webpage.
Sa11y

How to use

Click the toggle in the bottom right corner. If using assistive technology, the button is labelled "Check Accessibility".

Tip #1

Use the "Skip to issue" button to quickly cycle through all errors, warnings, or "good" buttons. The tooltip will automatically open. You can also press alt . with a keyboard.

Tip #2

Sa11y also checks hidden content. If you don't see an error or warning button, use the "Skip to issue" button to find it. An alert will pop up with a preview of the issue message. If you do not know what the alert is referencing, it might be a false positive or an issue that a developer might need to fix.

Screenshot of Skip to issue button and an alert stating that the item may be hidden in an accordion or tab component.

For developers and web administrators

Sa11y works best in a templated CMS environments. Create your own conditions and rulesets to strategically enforce your organization's accessibility, usability, or web style guidelines. Customize Sa11y to target specific areas of the page (e.g. main content area only) - don't highlight issues content authors can't fix! Add exclusions to ignore false positives or prevent Sa11y from highlighting content within social media widgets or other iFrame content.

Acknowledgements

Development lead by Adam Chaboryk, CPWA, IT Accessibility Specialist. Created within Digital Media Projects, Computing and Communication Services (CCS) at Ryerson University in Toronto, Canada.

Previous contributors

Other thanks

  • Sa11y is an adaptation of Tota11y by Khan Academy.
  • Tooltip library powered by Tippy.js
  • Colour contrast plugin created by Jason Day.
  • The readability feature is adapted from a Readability Bookmarklet created by Greg Kraus at North Carolina State University.
  • The icons are made by Font Awesome.
  • Sa11y is built with jQuery.
  • The bookmarklet version of Sa11y is hosted on jsDelivr, a CDN for open source projects.
  • John Jameson (Princeton University) maintains a fork of Sa11y called Editoria11y which is available as a turnkey Drupal module. Sa11y and Editoria11y share a lot of code!
  • The "Skip to content" button on this page is a great open source script called SkipTo.

Featured

Contact

If you have any questions or feedback, please email adam.chaboryk@ryerson.ca