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 indicates errors or warnings at the source with a simple tooltip on how to fix.

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 can also work as a bookmarklet. Sa11y is not a comprehensive code analysis tool.

  • Over 30 test conditions.
  • Easy, intuitive tooltips to explain issues.
  • Free and open source.
  • No complex API or integrations.
  • Simple rule sets.
  • Easily customizable: add your own rulesets.

Designed for content editors

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

States

Sa11y has three simple states.

Screenshot of error panel that says accessibility errors found!

Errors

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

Screenshot of warning panel that says no accessibility errors found, but please check warnings.

Warnings

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

Screenshot of pass panel that says no accessibility errors found.

Pass

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

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. Headings should always be structured in a way that conveys hierarchy.

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

Rulesets

Sa11y checks for the following issues and warnings.

Errors

  • 14 alternative text conditions.
  • Non-descript hyperlinks (i.e. Click here, learn more).
  • Tables missing headers <th>.
  • Tables with empty headers.
  • Tables using semantic headings (H1, H2) instead of table headings <th>.
  • Headings that skip levels.
  • Headings that are too long.
    • Note: this is not a WCAG 2.1 failure.
  • Heading structure does not start with an H1.
  • Blockquotes incorrectly used as headings.
  • Text contrast.
  • Inputs missing labels.
  • Page language not declared.
  • Detect duplicate id attributes.

Warnings

Warning messages may prompt you to manually review the element, provide suggestions to improve the usability/accessibility, or warn you of accessibility issues that cannot be programatically detected.

  • Images used as hyperlinks: review alternative text describes link location.
  • Detects ALL CAPS/uppercase.
  • Contrast that cannot be programatically determined, such as text with an image background.
  • Warning message on video widgets to provide closed captions.
  • Warning message on SoundCloud widgets to provide transcripts.
  • Warning message on all PDF links.
  • Warning message to discourage excessive use of links that open in new window.

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

Sa11y is intended to be customized for various CMSs, however it's also available as a bookmarklet. It can be used in any desktop browser. Simply drag the button below into your bookmarks bar. Click the bookmark on any webpage.

For developers and web administrators

Installation

Sa11y relies on jQuery and works best using a tooltip library that features a positioning system. Positioning systems ensure that tooltips are never hidden by conflicting CSS styling such as overflow:hidden;. This version of Sa11y was built with Tippy.js, a highly customizable tooltip library.

To install on your website, insert Sa11y right after the jQuery script tag, and right before the closing </body> tag. Include both Tippy.js and Popper.js before Sa11y. Visit Tippy.js Getting Started page to grab the latest version.

Example installation:
//jQuery Slim 3x
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"></script>

//Tippy.js v6 CDN (Tooltip library)
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

//Sa11y - (Pull source code from Github)
<script src="sa11y.js"></script>
Accessibility notice:

This version appends tooltips to the end of the body by default to ensure tooltips do not get hidden by conflicting CSS styling. If you customize the tooltips to include interactive content, please read documentation on creating accessible interactive tooltips for keyboard users.

Bootstrap-based websites

Bootstrap versions 3 and 4 already include tooltips/popovers powered by Poppers.js positioning library. For performance reasons, you can replace the HTML tippy.js markup with Bootstrap's tooltip markup.

Create your own rule sets

Create your own conditions and rule sets to strategically enforce your organization's accessibility, usability, or web style guidelines.

  1. Create your condition.
  2. Add this.anyWarning = true; or this.noErrors = false; to indicate Warning or Error state.
  3. Add respective CSS classes.
Example: Warn content editors of overusing a component.

The example condition detects if more than one announcement is detected on a page. If it detects more than one instance of the .announcement-component CSS class, it will be indicated as a warning. Using jQuery's gt:(0) selector, the warning button will only appear on every instance except the first component.

var checkAnnouncement = $('.announcement-component').length;

if (checkAnnouncement > 1) {

    this.anyWarning = true;

    WarningMessage = 'More than one Announcement component found! The Announcement
    component should be used strategically and sparingly. It should be used to get
    attention or warn users about something important. Misuse of this component makes
    it less effective or impactful. Secondly, this component is semantically
    labeled as an Announcement for people who use screen readers.'
    
      $('.announcement-component:gt(0)').addClass("sa11y-warning-border");
      $('.announcement-component:gt(0)').before('<div class="sa11y-instance"><button class="sa11y-link-warning-btn" data-tippy-content="' + WarningMessage + '" >' + WarningIcon + '</button></div>');
}

Acknowledgements

Created by Digital Media Projects, Computing and Communication Services (CCS) at Ryerson University in Toronto, Canada.

Development, design and testing by:

Built with

License

Sa11y is MIT licensed.

Contact

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