Skip to content

Sa11y 3.0
Compare
Choose a tag to compare
@adamchaboryk adamchaboryk released this 03 May 21:12
· 22 commits to master since this release
3.0.0
0c14e0c
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

Features for content editors

Dismissable 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.

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. 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. Rare.
  • Monochromacy: Unable to perceive any red, green, and blue light. People with monochromacy see shades of gray. Very rare.

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.

Accessibility updates

  • Improved keyboard support for interactive tooltips.
  • Given that tooltips are appended to the document.body, tooltips containing links were previously not keyboard accessible. Upon activation of a tooltip/annotation, keyboard focus is trapped inside the tooltip, until it is dismissed via the close button.
  • Added Forced Colours support (successor to Windows High Contrast mode).
    • Needs user testing and feedback.
  • Improved contrast of “Skip to Issue” button.

Interface changes

  • Full page error and warning banners are now displayed in the main panel. Page issues will be displayed above the Page Outline or panel status, in a region titled “Page Issues”.
  • This change is to account for various content management systems that have fixed admin toolbars at the top of every page.
    Removed redundant "Show" and "Hide" text from panel buttons for easier translation and localization support.
  • A soft gradient is added to scrollable regions to visually indicate that it’s scrollable (in addition to the scroll bar).
  • Close button added to all tooltips.
  • Removed loading indicator from main toggle.

Languages

German translation added.

Developer updates

Shadow DOM and Web Components

  • User interface is fully encapsulated in web components.
  • Ability to scan web components/open shadow DOMs for issues. Two new props added:
    • shadowComponents - Provide a comma separated list of known web components.
    • autoDetectShadowComponents- Set to true to automatically check all elements on a page for open shadow DOMs.

Headless

  • Support for headless checking (without user interface), via headless prop.
  • Generate CSS selector paths of issues, via selectorPathprop. Selector path is added to the results array.
    • Note: This is a “light duty” feature. If you need something more robust, consider using another library.
  • When headless is enabled, all toggleable checks are included by default.
  • All issues can be accessed by the global results array.

SCSS and styles

  • SCSS refactoring for improved readability. SCSS is broken up into several smaller files, some of which are imported directly into encapsulated interface components.
  • Added RTL (Right To Left) language support.
    • Needs user testing and feedback.
  • Added Forced Colours support (successor to Windows High Contrast mode).
    • Needs user testing and feedback.

Ruleset changes and other features

  • Improved checks for paragraph text that should be heading. Paragraph content that is larger than 24px, but less than 120 characters will be flagged as a warning.
  • New (optional) prop checkAllHideToggles, which enables all toggleable checks by default and hides the corresponding switch within the settings panel.
  • New dismissible warnings feature can be turned off via the dismissAnnotations prop (boolean).
  • New colour filters feature can be turned off via the colourFilterPluginprop (boolean).
  • PDF tooltip messaging updated. PDF warning annotation is now appended to all PDFs, instead of the first detected.
  • New (optional) prop to change location of panel panelPosition. This should provide more flexibility for implementation into other CMSs or websites with conflicting toolbars, chat bots, cookie banners, etc.
    • There are 4 options: top-left, top-right, left, and right.
    • Accessibility note: When the panel is positioned to the left side, the CSS property flex-direction: row-reverse is used to reverse the items within the main panel status which contains the issue count, Skip-to-issue button and Dismiss button. This causes a disconnect between the visual order and DOM order.

Modularization and refactoring

  • Codebase is now broken up into several smaller Javascript modules for better maintenance and readability.
  • Custom checks (sa11y-custom-checks.js) can now easily utilize other utility functions and methods via JavaScript imports. Custom checks are compiled into Sa11y.js upon build, meaning one less script tag/HTTP request!
    • customChecksprop is now a boolean setting.
  • Individual checks are now stored in an object for better usability/readability/conciseness. For example:
results.push({
  element: $el, // The issue or source element.
  type: Constants.Global.ERROR, // The type of issue: ERROR, WARNING, or GOOD
  content: MESSAGE, // The tooltip message.
  inline: false, // Display the annotation inline with text or not (display: inline, versus display: block)
  position: 'beforebegin', // Placement of annotation (uses insertAdjacentElement() method)
});

Other

Removed Typescript support.

  • Note from the author: I apologize for the inconvenience, although as the primary maintainer of this library, I currently lack the time and skill to accurately maintain Typescript support. 😕 Given the significant refactor and modularization of the project, I felt it was best to remove the TypeScript definitions file all together. Future PRs and contributions are still welcomed.

Bug fixes

  • <script>, <noscript>, and <style> tags are ignored when getting the inner text of links, headings, and images.
  • Adding new video sources to videoContent prop will properly display relevant tooltip warning instead of generic warning for iFrames.
  • Fixed accessible name computation error. Accessible name computation now accounts for special characters, such as ., [, ]
  • Change focus() to panel toggle if the “Skip To Issue” button doesn't exist.

Acknowledgements

Assets 2