The a11ychecker premium plugin allows you to check the HTML in the editor for various WCAG & Section 508 accessibility problems. It has an auto-repair feature that lets the user fix identified problems.
To add the Accessibility Checker plugin to the editor, add a11ychecker to the plugins option in the editor configuration.
For example:
tinymce.init({
selector: 'textarea',
plugins: 'a11ychecker',
toolbar: 'a11ycheck'
});The following checks are available for the Accessibility Checker plugin. The rules checked depends on:
-
The level of compliance (A, AA, or AAA), set using the
a11ychecker_leveloption. -
The HTML version of the content, set using the
a11ychecker_html_versionoption.
Each rule has a severity level, which will be one of the following, listed in order of increasing severity:
-
Warning
-
Error
Rule description: this rule checks that h1-h6 tags are used for heading content, not p tags. Not using correct heading markup will make it difficult for assistive technologies to represent and navigate through your content.
- Notification level (severity)
-
Warning
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specifications
Rule description: this rule checks that headings tags are used sequentially.
For example: A h1 heading should be followed by a h2 heading, not a h3 heading. Using sequential headings will make it easier for assistive technology to parse your content.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
Rule description: this rule checks that links next to other links do not have the same href attribute.
For example: If an image link and a text link have the same href attribute, both elements should be in the same a element. If an image link and a text link point to the same URL but are two separate elements, it can be confusing for users of screen readers and other assistive technologies.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
-
H2 - Combining adjacent image and text links for the same resource.
Rule description: this rule checks that an ol element is used for ordered lists. Do not use paragraphs beginning with numbers or roman numerals instead of an ol element containing li items. This is to simplify navigation and parsing of the content for users of assistive technologies.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
Rule description: this rule checks that a ul element is used for unordered lists. Do not use paragraphs beginning with * or - or some similar character instead of an ol element containing li items. This is to simplify navigation and parsing of the content for users of assistive technologies.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
Rule description: this rule checks that the contrast ratio of the text is above the following values:
-
When the compliance level is set to AA,
-
4.5:1 for normal text
-
3:1 for large text
-
-
When the compliance level is set to AAA,
-
7:1 for any text
-
Text with a low contrast ratio is hard to read for users with impaired vision.
- Notification level (severity)
-
Error
- WCAG level
-
Level AA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
- Notification level (severity)
-
Error
- WCAG level
-
Level AA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
- Notification level (severity)
-
Error
- WCAG level
-
Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
Rule description: this rule checks that all id attributes are unique in the editor. Duplicate id attributes are known to cause problems for assistive technologies when parsing the content.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
Rule description: this rule checks that all images have alternative (alt) text for screen readers and other assistive technologies.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
-
G95 - Providing short text alternatives that provide a brief description of the non-text content.
Rule description: this rule checks that the alt attribute text of the image is not the same as the filename of the image.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
-
G95 - Providing short text alternatives that provide a brief description of the non-text content.
Rule description: this rule checks that the alt attribute text of the image is not more than 100 characters.
An Image alternative text should be less than 100 characters warning dialog presents if the alternative (alt) text is longer than 100 characters. This dialog also presents the alternative text in an editable field, for immediate repair.
- Notification level (severity)
-
Warning
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
-
n/a.
Rule description: this rule checks that all table elements have a caption element describing the data inside the table to simplify parsing and navigation of the content for users of assistive technologies.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
-
H39 - Using caption elements to associate data table captions with data tables.
Rule description: this rule checks that all complex tables must have a summary attribute explaining to users of assistive technologies how to navigate through the data inside of the table.
|
Note
|
This rule only applies to HTML 4 content and is not checked when |
- Notification level (severity)
-
Warning
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4
- WCAG 2.1 specification
-
H73 - Using the summary attribute of the table element to give an overview of data tables.
Rule description: this rule checks that the table caption and summary does not have the same text content. The caption should explain what the table is about while the summary should explain how to navigate the data inside of the table.
|
Note
|
The table |
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
-
H73 - Using the summary attribute of the table element to give an overview of data tables.
Rule description: this rule checks that all tables contain both tr and td elements.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
Rule description: this rule checks that all table elements contain at least one table header (th) element.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
Rule description: this rule checks that all table header (th) elements have a scope attribute clarifying what scope the heading has inside of the table. The allowed values are row, col, rowgroup, and colgroup. This is important for users of assistive technologies to be able to parse table data.
- Notification level (severity)
-
Error
- WCAG level
-
Level A ; Level AA ; Level AAA
- HTML version
-
HTML4 and HTML5
- WCAG 2.1 specification
-
H63 - Using the scope attribute to associate header cells and data cells in data tables.
The following configuration options affect the behavior of the Accessibility Checker plugin.
The Accessibility Checker plugin provides the following events.
The Accessibility Checker plugin provides the following APIs.
Opens and closes the accessibility checker dialog with the results of the audit and options to correct the problems, if any.
Conducts an accessibility audit and reports the results without opening the dialog. The report produced is an array of objects, where each object represents an issue.
const issues = tinymce.activeEditor.plugins.a11ychecker.getReport();
console.log(issues);
// Example result
[
{
"contentID": "<div id=\"accessibility-issue__contentID\"><span>Text: </span><span>\"H5\"</span></div>",
"description": "Headings must be applied in sequential order. For example: Heading 1 should be followed by Heading 2, not Heading 3.",
"element": h5, // reference to the DOM element where the issue was found
"id": "D2",
"severity": "error",
"url": "https://www.w3.org/WAI/WCAG21/Techniques/general/G141.html",
},
{
"contentID": "<div id=\"accessibility-issue__contentID\"><span>Table: </span><span>\"2x2\"</span></div>",
"description": "Tables must have captions",
"element": table, // reference to the DOM element where the issue was found
"id": "T1",
"severity": "error",
"url": "https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html",
}
]In a11ychecker, when the content within the editor is audited, each element is checked to ensure that no Accessibility rules are violated. Any element which doesn’t adhere to a rule will generate an issue within the audit; the details of which are to be displayed in the a11ychecker dialog.
The 'issue' object provides relevant data pertaining to any issue generated by an element which violates an Accessibility rule:
-
id:StringA11ychecker issue identifier used by {productname}, such as D1, T4A. For a description and other details about the issue, see Accessibility Rules. -
description:Stringdescription of the issue; as will be displayed in the dialog. -
severity:Stringseverity level of the issue; eitherwarningorerror. -
url:StringURL reference for the issue. By default, this will be a link to the W3 website, containing the W3 WCAG technique that needs to be addressed to clear the issue. -
element:ObjectDOM element where the issue was found. -
contentID:StringA short snippet of the content (such as text, link, image, or table) where the issue was found.