Built-in accessibility checker for Wagtail: Sa11y

[thibaudcolas]

Is your proposal related to a problem?

As part of our goal to conform with ATAG 2.0, we need a built-in accessibility checker for Wagtail. We’ve currently settled on Sa11y as a good candidate. It’s based on Tota11y, similarly to the popular wagtail-accessibility package, but is purpose-built for content management use cases.

Describe the solution you'd like

We should integrate Sa11y as part of Wagtail’s full page previews, and within the page editor, either in the live preview panel, or in a separate panel alongside it.

Describe alternatives you've considered

We’ve considered two kinds of alternatives:

• Using another checker, for example Axe. Axe is very capable, but not geared specifically towards content creation, and doesn’t have a built-in UI to display its results. So it doesn’t feel like as straightforward of a fit.
• Keeping this as a third-party plugin. This seems sensible for this kind of opinionated integration, but if we do want to meet ATAG 2.0 conformance, it has to be a feature available to all CMS users (so we conform with ATAG 2.0 with the default setup of the CMS, rather than if the CMS is set up in a specific way

[lb-]

A few thoughts

• sa11y looks great and agree it seems well purposed to help with CMS previews
• If this is not going to be a third party package - will we provide some kind of hook (or other) to use a different library/or disable this? I think it is best to be enabled by default but understand that some developers will want to turn this off or replace this with their own.
• will we allow for the integration of custom checks? https://sa11y.netlify.app/developers/custom-checks/
• In the preview we might be best to integrate this with the userbar (bird button) maybe showing some kind of error number on it and then when you click the bird you can click a sub-menu item to show the a11y sidebar.
• We need to be careful integrating more JS/CSS on top of any previewed page, it opens up more risk for overlapping with the page's styles or JS with naming clashes.