Accessibility in EJ2 JavaScript Rich text editor control
24 Jan 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.
ARIA attributes
- The toolbar of Rich Text Editor, assigned the role of
Toolbar
and has the following list of ARIA attribute.
Property | 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. 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
.
Property | 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 ToolBar. |
// initialize Rich Text Editor component
var defaultRTE = new ej.richtexteditor.RichTextEditor({toolbarSettings: {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo']
}});
// render initialized Rich Text Editor
defaultRTE.appendTo('#defaultRTE');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-richtexteditor/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="defaultRTE">
<p>The Rich Text Editor is WYSIWYG ("what you see is what you get") editor useful to create and edit content, and return the valid <a href="https://ej2.syncfusion.com/home/" target="_blank">HTML markup</a> or <a href="https://ej2.syncfusion.com/home/" target="_blank">markdown</a> of the content</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>
</div>
</div>
<style>
.e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-left::before {
content: "\e76e";
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-rotate-right::before {
content: "\e726";
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
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.