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 has over 80 checks.

  • 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.
    • Broken same-page links.
  • 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.
  • Elements with duplicate IDs that are being referenced as a label.
  • Missing page title.

  • Headings
    • Headings that are too long (Not a WCAG 2.1 requirement).
    • Suspiciously short blockquotes that may actually be headings.
    • Suspicious bold text that may actually be headings.
  • Images
    • Decorative images
    • Hyperlinked images: ensure alt text describes link location.
    • Images containing redundant words in alt text like "image of" or "graphic of".
    • <figure> images that have duplicate alt and caption text.
    • <figure> images that are indicated as decorative and have caption text.
  • A list of items that should be converted into a semantic list.
  • Large quantities of ALL CAPS/Uppercase.
  • Contrast that cannot be programmatically determined, such as text with an image background.
  • Closed captions for videos.
  • Transcripts for podcasts and audio content.
  • Twitter widgets that may be problematic for keyboard users.
  • Reminder to manually review social media and other iFrame embeds
  • Check PDF for accessibility or recommend to convert into an accessible web page.
  • 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.
  • Underlined text.

  • Images that have alternative text.
  • Links that have an accessible name using ARIA.

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!

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

States

Sa11y has three states.

Errors

Accessibility or usability issues are detected and need to be fixed.

Warnings

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

Good

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

Quality assurance

Creating an inclusive experience requires intention. Sa11y does not only flag images missing alt text, but you can easily review the alt text on all images for relevance and quality. Sa11y has several checks to ensure content follows best practices for accessibility.