---
title: "Accessibility options"
description: "Configure the accessibility of TinyMCE."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/accessibility/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/accessibility/index.md"
version: "6"
last_updated: "2023-09-12T11:38:52Z"
tokens: 1165
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/accessibility/).
# 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.

> **Important:** When `a11y_advanced_options` is set to `true`, [`a11ychecker_allow_decorative_images`](../a11ychecker/#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',
  toolbar: 'a11ycheck image',
  a11y_advanced_options: true
});
```

## `highlight_on_focus`

> **Note:** This feature is only available for TinyMCE 6.4 and later.
The `highlight_on_focus` option adds a blue outline to an instantiated TinyMCE editor when that editor is made the input focus. When using the `oxide-dark` skin, the outline is white.

This allows users to clearly see when the editor is in focus, or which editor has focus if more than one TinyMCE instance is available.

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

### Example: using `highlight_on_focus`

```js
tinymce.init({
  selector: "textarea",
  highlight_on_focus: true
});
```

### Using `highlight_on_focus` with custom skins

If a [custom skin](../creating-a-skin/) is being used, two variables can be updated to match the `highlight_on_focus` option’s appearance with the custom skin.

The two rules and their default values are:

```css
@edit-area-border-color: #2D6ADF;
@edit-area-border-width: 2px;
```

> **Note:** This is entirely optional. If the default values are not changed, the `highlight_on_focus` option works with a custom skin exactly as it does with TinyMCE default skins.

## `iframe_aria_text`

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

```html
<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](../inline-editor-options/#inline).

**Type:** `String`

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

### Example: using `iframe_aria_text`

```js
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) 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

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

## `help_accessibility`

> **Note:** This feature is only available for TinyMCE 6.7 and later.
When the [Help](../help/) plugin is loaded, the TinyMCE editor displays the keyboard shortcut for accessing the Help dialog in the TinyMCE status bar by default.

The `help_accessibility` option allows for this display to be turned off.

**Type:** `Boolean`

**Possible values:** `true`, `false`

**Default value:** `true`

### Example: turning `help_accessibility` off

```js
tinymce.init({
  selector: "textarea",  // change this value according to your html
  plugins: "help",
  help_accessibility: false,
});
```

### Example: explicitly turning `help_accessibility` on

The `help_accessibility` option is set to true by default when the **Help** plugin is loaded.

It is not necessary, but may be useful, to explicitly set the option to `true`.

```js
tinymce.init({
  selector: "textarea",  // change this value according to your html
  plugins: "help",
  help_accessibility: true,
});
```