- ARIA attributes
- Keyboard navigation
- Implementing accessibility best practices
- See also
Contact Support
Accessibility in the Angular Rich Text Editor Component
17 May 20258 minutes to read
The Rich Text Editor component is designed with accessibility in mind, adhering to WAI-ARIA specifications and implementing ARIA roles, states, and properties. This ensures full accessibility support, making it user-friendly for people who rely on assistive technologies (AT) or keyboard navigation.
The accessibility compliance for the Rich Text Editor component is outlined below.
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.ARIA attributes
The toolbar in the Rich Text Editor is assigned the role of ‘Toolbar’ and includes the following attributes.
| 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 more details on Toolbar ARIA attributes, refer to 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. |
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarSettingsModel, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [RichTextEditorModule],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor #editor id='editor' [toolbarSettings]='tools'></ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
public tools: ToolbarSettingsModel = {
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']
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Keyboard navigation
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.
For more details on keyboard navigation, refer to the Keyboard support documentation.
Customizing shortcut keys
You can customize shortcut keys using the formatter property.This allows you to configure custom key combinations for various actions in the Rich Text Editor. For example, you can set ctrl+q to open the Insert Hyperlink dialog.
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService, IHtmlFormatterModel, HTMLFormatter } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [RichTextEditorModule],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='editor' #sample [formatter]='formatter' [value]='value'>
</ejs-richtexteditor>`,
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, TableService, PasteCleanupService]
})
export class AppComponent {
public value: string = "<p>The Rich Text Editor triggers events based on its actions. </p><p> The events can be used as an extension point to perform custom operations.</p><ul><li>created - Triggers when the component is rendered.</li><li>change - Triggers only when editor is blurred and changes are done to the content.</li><li>focus - Triggers when editor is focused in.</li><li>blur - Triggers when editor is focused out.</li><li>actionBegin - Triggers before command execution using toolbar items or executeCommand method.</li><li>actionComplete - Triggers after command execution using toolbar items or executeCommand method.</li><li>destroyed – Triggers when the component is destroyed.</li></ul>";
public customHTMLModel: IHtmlFormatterModel = { // formatter is used to configure the custom key
keyConfig: {
'insert-link': 'ctrl+q', // confite the desired key
}
};
public formatter: HTMLFormatter = new HTMLFormatter(this.customHTMLModel); // to configure custom key
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Implementing accessibility best practices
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.