Sa11y is an accessibility checker designed for content creators available in Word.Emerson. You don’t need to be a web developer or understand code to use it! It can help you identify common accessibility issues that arise when creating content for the web.
Things Sa11y Checks For
Sa11y checks mainly for issues with the text and images on a post or page. Sa11y has two levels of checks: errors and warnings.
- Errors: Accessibility issues that need to be fixed.
- Warnings: A potential accessibility issue that should be manually reviewed.
Please see the section Checks on the Sa11y overview page for a detailed list of what is covered under errors and warnings.
Sa11y also has a Readability estimate and a Color Filter feature that approximates what the post or page looks like to people with different types of color blindness.
There are a couple of things that Sa11y cannot check:
- Sa11y does not scan within PDFs for accessibility. It will flag PDFs with a warning.
- Sa11y cannot determine if a video has closed captions or not. If you know that your video has accurate captions, you can ignore this warning.
Where to Find Sa11y
Sa11y is available in two places in Word.Emerson:
- Preview Mode when in the Post or Page editor. (This is called View or Preview in new tab when using the block editor and Preview Changes when using the classic editor.) These are options for previewing posts and pages before publishing them or publishing changes made. Sa11y does not appear in the editor itself.
- When you are signed into Word.emerson and viewing a site that you can edit (administrator, editor, or author roles).
- Sa11y does not appear to the public or to those with subscriber roles to the site.
Errors and warnings detected by Sa11y cannot be corrected within the Sa11y plugin. Please go back to the edit page for the post or page to correct issues. Preview mode should open in a new tab, leaving the edit page open in another tab on your browser.
Expanding and Collapsing Sa11y
Sa11y appears as an icon in the lower right corner.
The notification badge displays how many errors and/or warnings Sa11y has detected.
By default, the Sa11y icon is collapsed. Click on the icon to view the errors and/or warnings. Errors and warnings are displayed both in Sa11y and with icons on the page itself. Click on the icon again to toggle back to the collapsed view and hide Sa11y’s markup of the page.
Example of the expanded Sa11y checker:
Navigating Through Sa11y's Errors and Warnings
You can view and navigate through the errors and warnings in multiple ways:
- By clicking on areas marked on the page with the exclamation mark icon
- By clicking on errors and warnings in the Outline in Sa11y
- By clicking on errors and warnings at the bottom of Sa11y
- By pressing Option + S on the keyboard
Example of an error being highlighted on the page by Sa11y and that error highlighted in the Outline:
Below is an example of a warning being highlighted on a page by Sa11y. Warnings are marked on the page with a yellow question mark in a circle icon. Click on these icons for more information about the warning message. Warnings will be included when cycling through the issues Sa11y has tagged using the Option + S keyboard shortcut.
Image Accessibility
Click on the Images tab in Sa11y to get more information about the images.
Example of the Images tab showing an image that has been flagged with a warning message:
To correct issues flagged by Sa11y, go back to the editor page for the post or page that you are using the tool on.
Color Filter
To use the Color Filter feature, click on Settings in the Sa11y app.
This tool offers an approximation of what the page would look like to a person with color blindness. Please review the Color Filter section on Sa11y’s overview page for more information.