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 focuses on content related issues and successes.
Checks
Sa11y has over 50 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. Although be sure to review your page even if there are no errors or warnings!
States
Sa11y has three simple 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.
Page 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.
Image outline
The Images tab makes it easy to review all images and their corresponding alt text within a page for accuracy and quality.
Images that are hyperlinked will display a link icon to indicate that it's a functional image.
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 alt and link text follow best practices.
Try: Press alt A to enable Sa11y, and then review the alt text for each image!
Additional settings
Sa11y has four additional checks and a dark mode setting that can be enabled in the Settings tab. Although these checks can be toggled on and off, it does not mean they are not important! Depending on the website theme or plugin, they may not need to be tested for every time. For example, some form plugins automatically provide a label for each form input.
Developers: You can use use props to hide these additional checks.
WordPress admins: You can hide these checks from the plugin settings page.
Readability
Sa11y can estimate the readability score from all paragraphs and list content. 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. 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.
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.
Colour filters
Colour filters let you simulate various colour vision deficiencies (CVD) within a page. Use these colour filters on maps, charts, graphs, and other elements. CVD is caused by an abnormality in the cone cells of the retina in the eye. These cone cells are responsible for detecting color, and they come in three types: red, green, and blue. People with CVD have a deficiency or absence of one or more of these cone cell types, which affects their ability to distinguish certain colors.
Limitations
Colour filter simulations are not entirely accurate because they cannot accurately replicate how the brain of someone with CVD perceives colors. However, these colour filters can still be helpful in identifying potential color combinations that may be difficult for people with CVD to distinguish.
How to use colour filters
Go to Settings, and then select the Colour Filter selection button. You can choose between four different colour filters:
- Protanopia: Unable to perceive red light.
- Deuteranopia: Unable to perceive green light.
- Tritanopia: Unable to perceive blue light.
- Monochromacy: Unable to perceive any red, green, and blue light. People with monochromacy see shades of gray.
Check for elements that are difficult to perceive or distinguish against other colours.
About these colour filters
The colour filters used in Sa11y are from the DaltonLens library. To learn more about the different models and literature review, please check out: Review of Open Source Color Blindness Simulations.
Dismiss warnings
This feature gives content editors the ability to temporarily dismiss any warnings on a page while they are working. To restore all warnings on a page, simply select the “Show dismissed warnings” button.
Limitations
Dismissed warnings are unique to the web page you are editing. Dismissing a single warning will not dismiss every instance of that issue across your website. This feature uses your browser’s local web storage (a type of cookie) to “remember” which warnings you dismissed. If you clear your browser’s cache and cookies, all dismissed alerts will be restored.
How to use
Click the toggle in the bottom right corner. If using assistive technology, the button is labelled "Check Accessibility". You can also press alt A with a keyboard.
Skip to issue
Use the "Skip to issue" button to quickly cycle through all annotations. The tooltip will automatically open. You can also press alt S or alt > with a keyboard.
To go to the previous issue, press alt W or alt <.
Hidden content
If you do not see an annotation, 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.
