Accessibility in Angular Markdown Editor Component
29 Aug 202510 minutes to read
The Angular Markdown Editor is designed to be fully accessible, adhering to WAI-ARIA specifications with ARIA roles, states, and properties. These features ensure compatibility with assistive technologies (AT) and keyboard navigation, enhancing usability for all users.
Accessibility standards
The following table summarizes the accessibility support of the Markdown Editor component:
- 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 Markdown Editor and its toolbar include ARIA attributes to enhance accessibility.
Toolbar ARIA attributes
The toolbar is assigned the toolbar role with 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 Markdown Editor, the attribute contains the ID of the Markdown Editor to indicate the popup as a child element. |
For more details on Toolbar ARIA attributes, refer to the Accessibility of Toolbar documentation.
Editor ARIA attributes
The Markdown Editor is assigned the application role:
| Property | Functionalities |
|---|---|
| role=”application” | This attribute added to the Markdown 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, ToolbarService, MarkdownEditorService , HtmlEditorService, ImageService, LinkService, TableService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='markdown-editor' [editorMode]='mode' [toolbarSettings]='tools' [value]="value"></ejs-richtexteditor>`,
providers: [ToolbarService, HtmlEditorService, MarkdownEditorService, ImageService, LinkService, TableService]
})
export class AppComponent {
public mode: string = 'Markdown';
public value: string =
'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.';
public tools: ToolbarSettingsModel = {
items: [
'Bold',
'Italic',
'StrikeThrough',
'InlineCode',
'SuperScript',
'SubScript',
'|',
'Formats',
'Blockquote',
'|',
'OrderedList',
'UnorderedList',
'CreateLink',
'Image',
'CreateTable',
'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 Markdown 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 Markdown 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 Markdown Editor. For example, you can set ctrl+q to open the Insert Hyperlink dialog.
import { Component } from '@angular/core';
import { RichTextEditorModule, ToolbarService, MarkdownFormatter, MarkdownEditorService , HtmlEditorService, ImageService, LinkService, TableService, ToolbarSettingsModel } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
imports: [
RichTextEditorModule
],
standalone: true,
selector: 'app-root',
template: `<ejs-richtexteditor id='markdown-editor' [formatter]='formatter' [editorMode]='mode' [toolbarSettings]='tools' [value]="value"></ejs-richtexteditor>`,
providers: [ToolbarService, HtmlEditorService, MarkdownEditorService, ImageService, LinkService, TableService]
})
export class AppComponent {
public mode: string = 'Markdown';
public value: string =
'In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.';
public formatter: MarkdownFormatter = new MarkdownFormatter({
keyConfig: {
'insert-link': 'ctrl+q', // confite the desired key
},
});
public tools: ToolbarSettingsModel = {
items: [
'Bold',
'Italic',
'StrikeThrough',
'InlineCode',
'SuperScript',
'SubScript',
'|',
'Formats',
'Blockquote',
'|',
'OrderedList',
'UnorderedList',
'CreateLink',
'Image',
'CreateTable',
],
};
}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 Markdown Editor component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Markdown Editor component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Markdown Editor component with accessibility tools.