Accessibility options

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.

When 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 a11y_advanced_options

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

iframe_aria_text

This option is used to customize the title attribute on the TinyMCE iframe element. For example:

<iframe title="Rich Text Area. Press ALT-0 for help."></iframe>

The title attribute is read by screen-readers to help users identify the editor. This option only applies to TinyMCE classic (iframe) mode and has no effect on inline editors.

Type: String

Default value: 'Rich Text Area. Press ALT-0 for help.'

Example: Using iframe_aria_text

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  iframe_aria_text: 'Text Editor'
});

Tab order

The tab order of the elements in a page, including TinyMCE, should be configured by setting the tabindex attribute on the relevant HTML elements. The browser will then natively handle the tab order.

To configure tabindex for the TinyMCE editor, set the attribute on the target element for the editor.

In iframe (classic editor) mode, TinyMCE will copy the tabindex attribute from the target element to the editor’s iframe, to allow this to work correctly.

Example: Configuring tab order

<script>
tinymce.init({
  selector: 'textarea'
});
</script>
...
<input tabindex="1">
<textarea tabindex="2"></textarea>
<input tabindex="3">