Skip to content

Sa11y

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.

Sa11y has a focus on accessibility quality assurance. 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.

Sa11y was originally developed as an in-page accessibility checker customized for Ryerson University's content management system. With several hundred website editors and over 40, 000 web pages; ensuring brand consistency, usability and website accessibility poses its challenges. In an effort to stray away from expensive cloud-based accessibility tools and enforce accessibility best practices in an easy, effortless way - we made Sa11y.

Sa11y is featured on the W3C's Web Accessibility Evaluation Tools List!

Design philosophy

Role-based

When it comes to managing accessibility in a large organization or team, it requires distributing responsibilities. Sa11y highlights content related accessibility issues that should be fixed by content authors. For example, a developer should not be responsible for adding alternative text to an image uploaded by a content author. Likewise, a content author shouldn't be responsible for figuring out how to develop an accessible mega menu. Sa11y was designed for content authors, not developers. Divide and conquer.

Quality assurance

Creating an inclusive experience requires intention. Content authors should have the ability to easily review their work. For example, Sa11y does not only flag images missing alternative text, but content authors can also easily review the alternative text on other images for relevance and quality. Sa11y also has several test conditions to ensure alternative text follows best practices, including a warning prompt when an image is used as a link.

The warning says, Please Review: Image link contains alt text, although please ensure alt text describes the destination page. Consider using the title of the page it links to as the alt text. Does the alt text describe where the link takes you? Alt text: A Brown bear standing in grass in Alaska.

Versatile and scalable

Creating an inclusive experience goes beyond technical accessibility. An accessibility checker for content authors should be able to be easily customized and extend its rulesets beyond technical accessibility. Sa11y was designed with jQuery because of its low entry barrier and ability to develop faster. Developers can easily create custom rulesets to deter content authors from following bad practices or promote better usability. For example, provide a usability warning on an accordion component when there are more than 5 collapsed panels, but missing an “open all” button.

Actionable

Content authors should not have to decipher what is and what is not an issue. Interpreting mistaken results or false positives is not only frustrating, but can be timely and costly. An accessibility checker for content authors should be intuitive, actionable and free of false-positives. Sa11y complements templated environments where web components are standardized.

Affirmation

An accessibility checker should provide actionable information and not leave content authors in doubt. Sometimes people need a "thumbs up" to let them know they are on the right track. Instill confidence in people who may not be technical or familiar with accessibility concepts. Sa11y has three states: error, warning, and pass. A passing state provides content authors with positive reinforcement, or a small way of acknowledging their efforts.