• New prop: showGoodImageButton Set to false to hide "Good" annotations for images.
• New: All toggleable checks are enabled by default.
• Bug fix: Fixed a couple small design regressions regarding the notification badge icon and tooltips.
• Bug fix: fakeListQA prop fixed.
• Bug fix: Fixed a serious bug where contrast checking would stop flagging issues once it comes across a visually hidden element (for example, an .sr-only class).
• Bug fix: Fixed an issue with the duplicate ID check. Thank you @jbrulotte! #92
• Bug fix: Annotations will be inserted before [role="link"], [role="button"] in addition to a, button
• Bug fix: Fixed a couple tooltip formatting issues for English (US).
• Bug fix: Ensure missing target root alert only appears when headless is set to false.

• New feature: The meta page title is now displayed within the Page Outline.
  • To turn off this feature, set showTitleInPageOutline to false.
• Bug fix: Fixed appearance of badges for Windows 10/11.
• Bug fix: Some fake heading checks will be excluded for paragraphs within tables to minimize false positives.
• Bug fix: Fixed a bug where the gradient effect is properly applied to scrollable containers.

Features

A “link” badge is now displayed within tooltips and the Images panel for hyperlinked images, making it easier to identify functional images.

Bug fixes

• Added a background colour to images within the Images panel to prevent white logos from blending into Sa11y’s background.
• Added display: relative to button annotations to prevent conflicts with page styles. Annotations will remain anchored relative to where the issue is located.
• Improved forced-colors: active styling.
• Improved CSS styling shortcuts for language files.

New “Images” tab

The Images tab makes it easy to review all images and their corresponding alt text within a page. This feature is inspired by Editoria11y’s Alt Text tab!

Edit button for images

Experimental feature: Each image within the Images panel can display an "Edit" button, offering users convenient editing options. Multiple props are available to support implementations for various content management systems: editImageURLofCMS, relativePathImageSRC, and relativePathImageID. The edit button is selectively displayed for locally hosted images on the same domain. Explore props & methods page for documentation.

Interface enhancements

• Tooltips have a refreshed design, for a consistent look with the Images panel. Yellow and red text colours are used consistently depending on whether it’s an error or warning.
• When using the Colour Filters feature, surrounding settings will disappear. This makes Sa11y’s panel more compact during page review.

Rulesets

• The check for suspicious alt text words, such as "image of" or "photo of," now examines the first 6 characters of a string for the presence of stop words. This adjustment aims to reduce unnecessary warnings, considering that these words can be relevant in certain contexts, like "A black and white photo of a car."
• The word "thumbnail" has been included in the alt text stop words for English files. Consequently, images starting with the word "thumbnail" will now trigger a warning.

Developers

• New prop: aboutContent allows for the inclusion of a custom "About" or "Help" section within the Settings panel. This prop, a string accepting HTML content, should only ever be populated by developers and admins to mitigate XSS attacks.
• New Prop: Developers can overwrite the SUSPICIOUS_ALT_STOPWORDS array (e.g. image of, graphic of) within the language files via the susAltStopWords prop.
• New Prop: Developers can overwrite the WARNING_ALT_STOPWORDS array (e.g. click here) within the language files via the linkStopWords prop.
• New Prop: Add additional stop words to flag at the beginning of an alt text string as a placeholder error via the extraPlaceholderStopWords prop. For example, pass the word “untitled” to flag any image who’s alt text starts with “untitled”.
• Enhancement: detectSPArouting feature listens for click events instead of mousemove for better performance.

Explore props & methods page for documentation.

Bug fixes

• Resolved an issue with the automatic detection of shadow DOM elements on the page.
• Resolved an issue where unique characters are not encoded via CSV export.
• Implemented support for color-mix for colour contrast checking. Thanks to @nmerget! (Issue #85)
• Resolved a false positive in the document link check. URLs like https://press.un.org/en/2022/sc14904.doc.htm will no longer trigger warnings due to ".doc" in the URL. Thanks to @gregrgay! (Issue #86)

Developers

• New prop: headerIgnoreSpan — Exclude elements within headings to enhance the accuracy of checks and ensure that text isn't displayed within the Page Outline.
• New prop: headerIgnoreStrings — Alternative to headerIgnoreSpan prop that utilizes regex to ignore strings.
• Enhancement: Additional stop words for check that flags images containing placeholder stop words, e.g. alt=“placeholder”, alt=“to do”
• Enhancement: Updated fake list detection thanks to @itmaybejj and Editoria11y!
• Bug fix: Images with aria-label or aria-labelledby will no longer be flagged as missing alt text.
• Bug fix: Check for broken same-page links accommodates both encoded and decoded href and id values. Thanks to @hollsk for the contribution!

• Enhancement: New check for broken same-page links. When identified, these links will be flagged as an error with the corresponding message: “Broken same-page link. The link target does not match any element on the page.”
• Enhancement: Elements with duplicate IDs will only be flagged as errors if they are being referenced by other elements through various ARIA attributes or labels. Thanks to @brianteeman! (Issue #78)
• Bug fix: To minimize the occurrence of false positives regarding fake lists within tables, the fake list detection check will only identify specific patterns. Thanks to @gregrgay (Issue #80)

Developers

• Enhancement: Sa11y can check the specified target area (checkRoot) even if the selector moves to different elements on the page. Useful for single page applications where content may dynamically change. Thanks to @RobLoach for the suggestion! (Issue #79)
• Enhancement: The checkAll() method now offers the flexibility to pass different selectors for checkRoot and readabilityRoot than those initially specified upon instantiation.

View an interactive demo of both enhancements.

Updated bookmarklet

Grab the latest bookmarklet from the project website.

Automatic page language detection

New bookmarklet automatically displays a translated version of Sa11y based on the page language. If the language is not supported, it will default to English.

Security policy warning

A warning will appear if the website enforces security policies that restrict Sa11y from working on its pages.

Developer updates

Additional ways of adding custom checks without a build step. Custom Check's documentation will be updated soon. Custom checks can be:

1. Passed as an object during instantiation.
2. Using event dispatchers, Sa11y will "listen" for the presence of custom checks up to 500ms.
   • Timing can be customized via prop delayCustomCheck

New methods

New methods to help build custom checks.

• sa11y.find(selector, desiredRoot, exclude) — Find any elements on the page.
• sa11y.prepareDismissal(string) — Create dismiss keys.
• sa11y.sanitizeHTML(string) — Sanitize text strings.

Bug fixes

• Adjust tippy.js property to use auto-start instead of right-start so tooltips open up on the side with the most space.
• Tooltip arrows visually closer to annotation.
• Spelling error fix thanks to @brianteeman

Bug fix

• Accessible name computation now accurately excludes <noscript>, <style>, and <script> tags. Thanks to @brianteeman for bug report! (Issue #73)

Bug fixes

• Bug fix: Fixed a TypeError within find() utility function. Issue appears to occur on some pages with shadow DOMs.
• Bug fix: Fixed an issue where long URLs break outside of the tooltip.
• Removed unused development dependencies.