Accessibility in Vue Rich text editor component

11 Jun 202416 minutes to read

The Rich Text Editor component has been designed, keeping in mind the WAI-ARIA specifications, and applies the WAI-ARIA roles, states, and properties. This component is characterized by complete ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.

The accessibility compliance for the Rich Text Editor component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Intermediate
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation Intermediate
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

ARIA attributes

The toolbar of Rich Text Editor, assigned the role of Toolbar and has the following list of ARIA attributes.

Roles and Attributes Functionalities
role=”toolbar” This attribute added to the toolbar element describes the actual role of the element.
aria-orientation Indicates the toolbar orientation. Default value is horizontal.
aria-haspopup Indicates the popup mode of the toolbar. The default value is false. When popup mode is enabled, attribute value has to be changed to true.
aria-disabled Indicates the disabled state of the toolbar.
aria-owns Identifies an element to define a visual, functional, or contextual parent/child relationship between DOM elements when the DOM hierarchy cannot represent the relationship. In the Rich Text Editor, the attribute contains the ID of the Rich Text Editor to indicate the popup as a child element.

For further details of toolbar ARIA attributes, refer the accessibility of Toolbar documentation.

The Rich Text Editor element is assigned the role of application.

Roles and Attributes Functionalities
role=”application” This attribute added to the Rich Text Editor element describes the actual role of the element.
aria-disabled Indicates the disabled state of the Rich Text Editor. 
<template>
  <ejs-richtexteditor ref="defaultRTE" :height="350" :iframeSettings="iframeData">
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content. Users can format their content using standard toolbar commands.</p>
    <p><b>Key features:</b></p>
    <ul>
      <li>
        <p>Provides IFRAME and DIV modes</p>
      </li>
      <li>
        <p>Capable of handling markdown editing.</p>
      </li>
      <li>
        <p>Contains a modular library to load the necessary functionality on demand.</p>
      </li>
      <li>
        <p>Provides a fully customizable toolbar.</p>
      </li>
      <li>
        <p>Provides HTML view to edit the source directly for developers.</p>
      </li>
      <li>
        <p>Supports third-party library integration.</p>
      </li>
      <li>
        <p>Allows preview of modified content before saving it.</p>
      </li>
      <li>
        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
      </li>
    </ul>
  </ejs-richtexteditor>
</template>
<script setup>
import { provide } from "vue";  
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
const iframeData = {
  enable: true
};
provide('richtexteditor',  [Toolbar, Link, Image, HtmlEditor, QuickToolbar]);
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
  <ejs-richtexteditor ref="defaultRTE" :height="350" :iframeSettings="iframeData">
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user
      experience to create and update the content. Users can format their content using standard toolbar commands.</p>
    <p><b>Key features:</b></p>
    <ul>
      <li>
        <p>Provides IFRAME and DIV modes</p>
      </li>
      <li>
        <p>Capable of handling markdown editing.</p>
      </li>
      <li>
        <p>Contains a modular library to load the necessary functionality on demand.</p>
      </li>
      <li>
        <p>Provides a fully customizable toolbar.</p>
      </li>
      <li>
        <p>Provides HTML view to edit the source directly for developers.</p>
      </li>
      <li>
        <p>Supports third-party library integration.</p>
      </li>
      <li>
        <p>Allows preview of modified content before saving it.</p>
      </li>
      <li>
        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
      </li>
    </ul>
  </ejs-richtexteditor>
</template>

<script>
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-vue-richtexteditor';
export default {
  name: "App",
  components: {
    "ejs-richtexteditor": RichTextEditorComponent
  },

  data() {
    return {
      iframeData: {
        enable: true
      }
    }
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, HtmlEditor, QuickToolbar]
  }
}
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>

Keyboard interaction

The Rich Text Editor component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Rich Text Editor component.

HTML formation shortcut key

You can use the following key shortcuts when the Rich Text Editor renders with HTML edit mode.

Actions Keyboard shortcuts
Toolbar focus Alt + f10
Insert link Ctrl + k
Insert image Ctrl + Shift + i
Insert table Ctrl + Shift + e
Undo Ctrl + z
Redo Ctrl + y
Copy Ctrl + c
Cut Ctrl + x
Paste Ctrl + v
Bold Ctrl + b
Italic Ctrl + i
Underline Ctrl + u
Strikethrough Ctrl + Shift + s
Uppercase Ctrl + Shift + u
Lowercase Ctrl + Shift + l
Superscript Ctrl + Shift + =
Subscript Ctrl + =
Indents Ctrl + ]
Outdents Ctrl + [
HTML source Ctrl + Shift + h
Fullscreen Ctrl + Shift + f
Exit Fullscreen Esc
Justify center Ctrl + e
Justify full Ctrl + j
Justify left Ctrl + l
Justify right Ctrl + r
Clear format Ctrl + Shift + r
Ordered list Ctrl + Shift + o
Unordered list Ctrl + Alt + o
Format Painter Copy Alt + Shift + c
Format Painter Paste Alt + Shift + v
Format Painter Escape Esc

Markdown formation shortcut key

You can use the following key shortcuts when the Rich Text Editor renders with Markdown edit mode

Actions Keyboard shortcuts
Toolbar focus Alt + f10
Insert link Ctrl + k
Insert image Ctrl + Shift + i
Insert table Ctrl + Shift + e
Undo Ctrl + z
Redo Ctrl + y
Copy Ctrl + c
Cut Ctrl + x
Paste Ctrl + v
Bold Ctrl + b
Italic Ctrl + i
Strikethrough Ctrl + Shift + s
Uppercase Ctrl + Shift + u
Lowercase Ctrl + Shift + l
Superscript Ctrl + Shift + =
Subscript Ctrl + =
Fullscreen Ctrl + Shift + f
Ordered list Ctrl + Shift + o
Unordered list Ctrl + Alt + o

Ensuring accessibility

The Rich Text Editor component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Rich Text Editor component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Rich Text Editor component with accessibility tools.

See also