Overview

Most accessibility tools are designed for developers and often require knowledge of code to make sense of the results. Sa11y is designed for content authors and has a focus on content related issues and successes. Sa11y visually highlights issues at the source with a simple tooltip on how to fix them.

Sa11y includes some developer related checks, but it is not a comprehensive code analysis tool, nor is it a web accessibility overlay. Sa11y works best in an accessibility-ready theme or website.

What does "Sa11y" mean

"a11y" is a numeronym for the word "accessibility," where 11 represents the number of letters between a and y. The use of "a11y" on the internet is mostly used to identify content or tools related to digital accessibility. The "S" in Sa11y stands for "straightforward" or "simple," conveying the idea of "straightforward accessibility."

Checks

Sa11y helps identify accessibility issues with images, links, heading structure, and contrast. It also prompts you to review other things, like closed captions for videos, excessive uppercase letters, text that is too small, and much more.

Building an inclusive experience requires intention. Sa11y is designed to facilitate quality content accessibility. For example, it not only flags missing alt text but also lets you review alt text across all images to ensure relevance and quality.

For developers, Sa11y checks for issues like missing page titles, unlabelled buttons and form elements. However, it does not detect invalid ARIA attributes.

In total, Sa11y has over 80 checks.

Automatic

Sa11y does a quick scan after the page is fully loaded. If there are any errors or warnings, Sa11y will display a notification badge with the total number of issues detected. Red indicates errors, while yellow indicates there are warnings only. Be sure to review your page even if there are no errors or warnings!

States

Sa11y has three states.