• Increased control panel width for certain languages from 350px to 365px.
• More precise German phrases to improve localization coverage. The changes expand the German language translation file with additional terms and variations that users might encounter. Thanks @skerbis!

Bug fixes

• Tooltip messages for five image-related rulesets can now be correctly overridden.
• Empty header check now takes precedence over skipped heading detection. Thanks @Michael-Nesci!

Bug fix: Control panel was displaying wrong version number.

• Bug fix: Warning for when an SVG's fill or stroke attribute uses an unsupported colour space.
• Enhancement: Fixed Dutch language strings (#119). Many thanks to @MartijnMaandag!

Enhancements

• The Readability label in the Settings panel now includes an info icon with a tooltip explaining its function.

Developers

• Developers can override the placement of Sa11y's toggle/control panel using CSS variables or CSS shadow parts.

CSS variables

This is the best method to change the panel position. These two variables will adjust the horizontal and vertical positioning.

:root {
  --sa11y-toggle-x-offset: 18px; /* Horizontally adjust (right to left) */
  --sa11y-toggle-y-offset: 15px; /* Vertically adjust (bottom to top) */
}

Shadow parts

Alternative panel positioning method requiring manual adjustment, offering greater creative control to override default styling of toggle and panel.

sa11y-control-panel::part(toggle) {
  bottom: 15px;
  inset-inline-end: 18px;
}

sa11y-control-panel::part(panel) {
  bottom: 25px;
  inset-inline-end: 42px;
}

Enhancements

• Images from the same origin are converted to Base64 in the Export HTML report feature, ensuring image previews are embedded within the report for improved usability.
• Minor visual improvements to the HTML report.

Enhancements

• Support for Level AAA contrast checking via prop contrastAAA.
• Contrast tools and colour pickers are further simplified. A simple "Good" badge is shown when the colour picker finds a colour that meets contrast for the element in context, whether it's normal-sized text or large-sized text.

Bug fixes

• HTML export now uses absolute URLs for images to ensure they load properly.

Bug fix: Fixed an issue when embedded checks are turned off. Thanks @gregrgay!

• Bug fix: Fixed an issue with the outlineIgnore prop.

Minor enhancements. View update notes for Sa11y 4!

• The alt text check for file extensions now also detects image dimensions, e.g., alt="banner-900x400". The regex looks for image dimensions (like "900 x 400") by matching two numbers separated by "x," and uses word boundaries to avoid mistakes with similar phrases like "10x zoom."
• Added new props to configure the edit button in the Image Outline:
  • ignoreEditImageURL (Array) – If an image's src attribute contains any of the strings in this array, the edit button will not be shown for that image.
  • ignoreEditImageClass (Array) – If an image has any of the class names listed in this array, the edit button will be hidden.