ATAG - Feature - Validating the accessibility of the content: Testing the content in the editor while writing

[DannyLancaster]

To have the content tested while writing is something many authors are used to and appreciate when it comes to spell checking and similar functionalities. In the same way, accessibility mistakes can be pointed out and corrected immediately. This way, inaccessible content can be avoided and the burden of making accessibility tests and remediations tend to feel less cumbersome.

A live accessibility check can be done in the WYSIWYG editor while publishing, inspecting the content and supporting the author with help - texts and easy to understand suggestions for remediation.

Web author view

Example: TinyMCE accessibility checker plugin

When you run the check, you get a warning with a short description and a link to more in-depth information for that specific rule.

The question mark leads you to the TinyMCE website that has descriptions of the ruleset that is checked. The Accessibility Checker aims to be WCAG2.1 AA compliant. https://www.tiny.cloud/docs/plugins/a11ychecker/

There is an online demonstration of the accessibility checker in TinyMCE: http://fiddle.tinymce.com/glhaab

Possible built-in success criteria conformance tests to be done:

• Using <h1>-<h6> to identify headings.
• Providing heading elements at the beginning of each section of content.
• Sequential headings
• Adjacent links
• Using <ol>, <ul> and <dl> for lists or groups of links.
• Providing short text alternatives that provide a brief description of the non-text content or role="presentation" attribute.
• Using <caption> elements to associate data table captions with data tables.
• Using table markup to present tabular information, <th> and <td>.
• Using the scope attribute to associate header cells and data cells in data tables.
• Parsing, In content implemented, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique.

Tools like Sa11y and Editoria11y allow web authors to focus on what they can control. Most accessibility errors are introduced in the editor’s body field, so it is possible to target the WYSIWYG to that field and generate accessibility errors that target that section of the page specifically.

Sa11y - https://ryersondmp.github.io/sa11y/#install Editorially - https://itmaybejj.github.io/editoria11y/

Editoria11y needs to have JavaScript added to the HTML headers for the page:

<script [src="https://code.jquery.com/jquery](http://src%3D%22https//code.jquery.com/jquery) -3.5.1.min.js"></script>
<link rel="stylesheet" media="screen" href="/css/editoria11y.css">
<script src="/js/editoria11y-prefs.js"></script>
<script src="/js/editoria11y-localization.js"></script>
<script src="/js/editoria11y.js"></script>

Video documentation

https://youtu.be/mf5MQhgLW4g

Recommendations for implementation

To make sure the implementation of the features is not causing accessibility problems for web authors with disabilities:

• avoid drag-and-drop for choosing template, and/or always have a keyboard alternative;
• always provide one pointer alternative without specific gestures;
• always support keyboard navigation;
• consider keyboard shortcuts;
• do not rely on sensory characteristics as the sole indicator for understanding and operating content;
• do not indicate important information using colour alone;
• make sure there is enough contrast between text objects and its background colour.

[DannyLancaster]

An example of how Drupal implement this: https://www.drupal.org/project/editoria11y

[RachBreeze]

TinyMCE have this as a paid for feature of their latest editor

[MMasey]

Maybe with the new integration of TinyMce some new settings could be added to the appSettings to allow people to add their own keys for the paid version (assuming that’s how it works). It would potentially make it easier for Umbraco to add it as a cloud feature should they want to in the future.

[RachBreeze]

I've also created a draft PR for a11y checking in preview mode https://github.com/umbraco/Umbraco-CMS/pull/13328. Just a bit stuck on the gulp tasks.