Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y straightforwardly identifies errors or warnings at the source with a simple tooltip on how to fix them.
Export all errors and warnings on a page as CSV or HTML. Make it easier to compile accessibility audits or export results into your favourite reporting tool.
This feature is off by default. Admins or developers must turn this feature on using the exportResultsPlugin prop.
This feature is on by default for the bookmarklet version of Sa11y.
CSV reports exclude dismissed warnings.
HTML reports include dismissed warnings within an accordion component.
More helpful preview of hidden issues
When using the Skip-to-Issue button, Sa11y will display more helpful previews of hidden issues. Images, iframes, video, and audio content will be displayed in its entirety, otherwise a preview of the issue’s HTML will be displayed. This will help make it easier to identify hidden or off-screen issues.
New translations
New machine translations by DeepL.
Obligatory disclaimer: Machine-generated translations may contain errors or inaccuracies.
Bulgarian
Hungarian
Korean
Slovak
Accessibility
Buttons have thicker borders to improve accessibility.
Bug fixes
When a tooltip is open, pressing Escape now closes the tooltip instead of clearing everything.
When there are no headings on the page, the Page Outline will display “No headings found.”
Headings that are outside of the target area: will not display error or warning annotations, and will display as normal headings within the Page Outline. Use the existing outlineIgnore prop to exclude specific headings from the Page Outline.
Admins can change empty TH (table heading) within a table from an error to a warning using the new prop: tablesQAemptyTHisError. By default, it will remain an error.
Missing meta page <title> check modified to check for the presence of a <title> within the <head> instead of the entire document.
New props
altTextMaxCharLength: Override long alt text character count.
headingMaxCharLength: Override long heading character count.
URLTextMaxCharLength: Override character length for URLs as link text.
URLAsLinkTextWarning: Ability to turn off check.
exportResultsPlugin: Default off, new feature to explore results on a page as HTML or CSV.
tablesQAmissingTH: Ability to turn off tables missing TH check.
tablesQAsemanticHeadings: Ability to turn off tables containing semantic headings check.
tablesQAemptyTH: Ability to turn off empty TH check.
tablesQAemptyTHisError: Change empty TH to error or warning.
New features
Export Results
Export all errors and warnings on a page as CSV or HTML. Make it easier to compile accessibility audits or export results into your favourite reporting tool.
exportResultsPluginprop.More helpful preview of hidden issues
When using the Skip-to-Issue button, Sa11y will display more helpful previews of hidden issues. Images, iframes, video, and audio content will be displayed in its entirety, otherwise a preview of the issue’s HTML will be displayed. This will help make it easier to identify hidden or off-screen issues.
New translations
New machine translations by DeepL. Obligatory disclaimer: Machine-generated translations may contain errors or inaccuracies.
Accessibility
Bug fixes
Escapenow closes the tooltip instead of clearing everything.outlineIgnoreprop to exclude specific headings from the Page Outline.Feedback
Report a bug or leave feedback!
Developers
Ruleset changes
tablesQAemptyTHisError. By default, it will remain an error.<title>check modified to check for the presence of a<title>within the<head>instead of the entire document.New props
altTextMaxCharLength: Override long alt text character count.headingMaxCharLength: Override long heading character count.URLTextMaxCharLength: Override character length for URLs as link text.URLAsLinkTextWarning: Ability to turn off check.exportResultsPlugin: Default off, new feature to explore results on a page as HTML or CSV.tablesQAmissingTH: Ability to turn off tables missing TH check.tablesQAsemanticHeadings: Ability to turn off tables containing semantic headings check.tablesQAemptyTH: Ability to turn off empty TH check.tablesQAemptyTHisError: Change empty TH to error or warning.showHinPageOutline: Display the “H” in the Page Outline. View example showing H in Page Outline.Developer experience