---
title: "Accessibility Checker plugin"
description: "Checks the contents of the editor for WCAG & Section 508 accessibility problems."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/a11ychecker/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/a11ychecker/index.md"
version: "5"
last_updated: "2024-04-16T01:50:26Z"
tokens: 5478
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/a11ychecker/).
# Accessibility Checker plugin

> **Note:** This plugin is only available for [paid TinyMCE subscriptions](/pricing).
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.

## Interactive example

**Example**

```js
tinymce.init({
  selector: 'textarea#a11ychecker',
  plugins: 'a11ychecker advcode table advlist lists image media anchor hr link autoresize',
  toolbar: 'a11ycheck | formatselect bold forecolor backcolor | bullist numlist | link image media anchor | table | code',
  a11y_advanced_options: true,
  a11ychecker_html_version: 'html5',
  a11ychecker_level: 'aaa',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
```

## Basic setup

To add the A11yChecker plugin to the editor, add `a11ychecker` to the `plugins` option in the editor configuration.

For example:

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck'
});
```

## Accessibility Rules

The following checks are available for the A11yChecker plugin. The rules checked depends on:

- The level of compliance (A, AA, or AAA), set using the `a11ychecker_level` option.
- The HTML version of the content, set using the `a11ychecker_html_version` option.

Each rule has a severity level, which will be one of the following, listed in order of increasing severity:

- Information
- Warning
- Error

### D1 - Usage of paragraphs as headings

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

#### A11yChecker rule details - D1

- **Notification level (severity)**: Warning
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specifications**:

  - [H42 - Using h1-h6 to identify headings](https://www.w3.org/WAI/WCAG21/Techniques/html/H42.html).
  - [H69 - Providing heading elements at the beginning of each section of content](https://www.w3.org/WAI/WCAG21/Techniques/html/H69.html).

### D2 - Sequential headings

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

#### A11yChecker rule details - D2

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [G141 - Organizing a page using headings](https://www.w3.org/WAI/WCAG21/Techniques/general/G141.html).

### D3 - Adjacent links

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

#### A11yChecker rule details - D3

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [H2 - Combining adjacent image and text links for the same resource](https://www.w3.org/WAI/WCAG21/Techniques/html/H2.html).

### D4O - Ordered list structure

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

#### A11yChecker rule details - D4O

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [H48 - Using ol, ul and dl for lists or groups of links](https://www.w3.org/WAI/WCAG21/Techniques/html/H48.html).

### D4U - Unordered list structure

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

#### A11yChecker rule details - D4U

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [H48 - Using ol, ul and dl for lists or groups of links](https://www.w3.org/WAI/WCAG21/Techniques/html/H48.html).

### D5 - Contrast ratio of the text (D5A, D5B, and D5C)

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

#### A11yChecker rule details - D5A

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level AA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [G145 - Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G145.html).

#### A11yChecker rule details - D5B

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level AA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [G18 - Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html).

#### A11yChecker rule details - D5C

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [G17 - Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text](https://www.w3.org/WAI/WCAG21/Techniques/general/G17.html).

### H93 - IDs must be unique

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

#### A11yChecker rule details - H93

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [H93 - Ensuring that id attributes are unique on a Web page](https://www.w3.org/WAI/WCAG21/Techniques/html/H93.html).

### I1 - Image `alt` text

**Rule description:** This rule checks that all images have alternative (`alt`) text for screen readers and other assistive technologies.

#### A11yChecker rule details - I1

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [G95 - Providing short text alternatives that provide a brief description of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G95.html).

### I2 - Image `alt` text is not the image filename

**Rule description:** This rule checks that the `alt` attribute text of the image is not the same as the filename of the image.

#### A11yChecker rule details - I2

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [G95 - Providing short text alternatives that provide a brief description of the non-text content](https://www.w3.org/WAI/WCAG21/Techniques/general/G95.html).

### T1 - Table caption

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

#### A11yChecker rule details - T1

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [H39 - Using caption elements to associate data table captions with data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H39.html).

### T2 - Complex table summary

**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 `a11ychecker_html_version` is set to `html5`.

#### A11yChecker rule details - T2

- **Notification level (severity)**: Warning
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4
- **WCAG 2.1 specification**: [H73 - Using the summary attribute of the table element to give an overview of data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html).

### T3 - Table caption and summary

**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 `summary` attribute was deprecated in HTML 5, both the **what** and **how** information should be moved to the table caption.

#### A11yChecker rule details - T3

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_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](https://www.w3.org/WAI/WCAG21/Techniques/html/H73.html).

### T4A - Table markup

**Rule description:** This rule checks that all `tables` contain both `td` and `th` elements.

#### A11yChecker rule details - T4A

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [H51 - Using table markup to present tabular information](https://www.w3.org/WAI/WCAG21/Techniques/html/H51.html).

### T4B - Table headers

**Rule description:** This rule checks that all `table` elements contain at least one table header (`th`) element.

#### A11yChecker rule details - T4B

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [H51 - Using table markup to present tabular information](https://www.w3.org/WAI/WCAG21/Techniques/html/H51.html).

### T4C - Table heading scope

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

#### A11yChecker rule details - T4C

- **Notification level (severity)**: Error
- **[WCAG level](https://www.w3.org/TR/WCAG21/#conformance)**: Level A ; Level AA ; Level AAA
- **[HTML version](#a11ychecker_html_version)**: HTML4 and HTML5
- **WCAG 2.1 specification**: [H63 - Using the scope attribute to associate header cells and data cells in data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H63.html).

## Configuration Options

The following configuration options affect the behavior of the A11yChecker plugin.

### `a11y_advanced_options`

This option affects the functionality of:

- The Accessibility Checker plugin (`a11ychecker`).
- The Image plugin (`image`).

Setting `a11y_advanced_options` to `true`:

- Adds the **Image is decorative** option to the *Insert/Edit Image* dialog, allowing users to specify that an image is decorative and does not require alternative text for accessibility purposes.
- Adds the **Image is decorative** option to the *Accessibility Checker error* dialog for images without alternative text or the `role="presentation"` attribute.

> **Important:** When `a11y_advanced_options` is set to `true`, [`a11ychecker_allow_decorative_images`](#a11ychecker_allow_decorative_images) will default to `true`.
**Type:** `Boolean`

**Default Value:** `false`

**Possible Values:** `true`, `false`

#### Example: Using `a11y_advanced_options`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'a11ychecker image',
  a11y_advanced_options: true
});
```

### `a11ychecker_allow_decorative_images`

This option sets whether the Accessibility Checker should allow decorative images. When this option is set to `true`, a decorative image must have **both**:

- An empty alternative text attribute.
- The `role="presentation"` attribute.

For example:

```html
<img src="my-image.png" role="presentation" alt="" />
```
If `a11ychecker_allow_decorative_images` is set to `true`, the Accessibility Checker will present an error when:

- An image does not have the alternative text attribute (`alt`).
- An image has an empty alternative text attribute, but is missing the `role="presentation"` attribute.
- An image has alternative text and a conflicting `role="presentation"` attribute.

If `a11ychecker_allow_decorative_images` is set to `false`, the Accessibility Checker will present an error when:

- An image does not have the alternative text attribute (`alt`).
- An image has an empty alternative text attribute.
- An image has the `role="presentation"` attribute.

> **Note:** If [`a11y_advanced_options`](#a11y_advanced_options) is set to `true`, `a11ychecker_allow_decorative_images` will default to `true`.
**Type:** `Boolean`

**Default value:** `false`

**Possible Values:** `true`, `false`

#### Example: Using `a11ychecker_allow_decorative_images`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_allow_decorative_images: true
});
```

### `a11ychecker_filter_issue`

The `a11ychecker_filter_issue` option allows Accessibility Checker issues to be removed from the Accessibility Checker report using a callback function. This option is a flexible alternative to the `a11ychecker_ignored_rules` option. This option can remove issues from the results shown in the dialog and the `getReport` API.

The function will be passed the results of the [`getReport()` API](#getreport). To filter an issue from the Accessibility Checker report, the callback needs to return `false` for that particular issue.

**Type:** `Function`

**Default Value:**

```js
function(issue) {
  return true;
}
```

#### Example: Using `a11ychecker_filter_issue` to filter out the Accessibility Checker T1 rule

The callback function in the following example will return `false` if the issue `id` value is `'T1'`, filtering `'T1'` issues from the Accessibility Checker report.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_filter_issue: function(issue) {
    return issue.id !== 'T1';
  }
});
```

#### Example: Using `a11ychecker_filter_issue` to filter out all Accessibility Checker table rules

The callback function in the following example will return `false` if the issue `element` value is `'table'`, filtering all `table` element-related issues from the Accessibility Checker report.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_filter_issue: function(issue) {
    return issue.element.nodeName.toLowerCase() !== 'table';
  }
});
```

### `a11ychecker_html_version`

This configuration option sets the HTML version to use when checking issues.

For example: Setting the version to HTML 4 will enable the rule "Complex tables should have summaries", where `summary` is a valid attribute in HTML 4 but not HTML 5.

**Type:** `String`

**Default value:** `html4`

**Possible Values:** `html4`, `html5`

#### Example: Using `a11ychecker_html_version`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_html_version: 'html5'
});
```

### `a11ychecker_ignored_rules`

The `a11ychecker_ignored_rules` option prevents specific Accessibility Checker rules from being checked. This feature allows developers to skip rules that they do not wish to check. For example: To skip rules that flag known content issues or custom HTML that should not be checked.

**Type:** A comma-separated string.

**Default Value:** `''`

**Possible values:** `'D1'`, `'D2'`, `'D3'`, `'D4O'`, `'D4U'`, `'D5A'`, `'D5B'`, `'D5C'`, `'H93'`, `'I1'`, `'I2'`, `'T1'`, `'T2'`, `'T3'`, `'T4A'`, `'T4B'`, `'T4C'`

#### Example: Using `a11ychecker_ignored_rules`

This examples shows how to ignore the following checks (rules):

- D2 - Sequential headings
- I2 - Image `alt` text is not the image filename
- T4B - Table headers

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_ignored_rules: 'D2, I2, T4B'
});
```

### `a11ychecker_issue_url_callback`

The `a11ychecker_issue_url_callback` option is used to change the target URL for the "Click for more info" button (
![help icon - a question mark inside a circle](../_images/icons/help.svg)
) in the Accessibility Checker dialog. By default, the "more info" links will point to `https://www.tiny.cloud/docs/plugins/a11ychecker/#<ruleId>;`, such as `https://www.tiny.cloud/docs/plugins/a11ychecker/#D1`. This option can be used to set the target URL to a page or pages outside [https://www.tiny.cloud/docs/](/docs/).

**Type:** `Function`

**Default Value:** `undefined`

#### Example: Using `a11ychecker_issue_url_callback`

This example shows how to change the link for the "Click for more info" button (
![help icon - a question mark inside a circle](../_images/icons/help.svg)
) on the Accessibility Checker dialog to point to anchors at `www.example.com/tinymce/a11ychecker/more_info`.

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_issue_url_callback: function (ruleId) {
    return `https://www.example.com/tinymce/a11ychecker/more_info#${ruleId}`
  };
});
```

### `a11ychecker_level`

This configuration option sets the [WCAG level](https://www.w3.org/TR/WCAG20/#conformance) to use when checking issues.

For example, the "Text must have a contrast ratio of at least …​" rule:

- When using **AA**, Accessibility Checker will check that the contrast ratio is not less than 4.5:1.
- When using **AAA**, Accessibility Checker will check that the contrast ratio is not less than 7.0:1.

**Type:** `String`

**Default value:** `aa`

**Possible Values:** `a`, `aa`, `aaa`

#### Example: Using `a11ychecker_level`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'a11ychecker',
  toolbar: 'a11ycheck',
  a11ychecker_level: 'aaa'
});
```