Accessibility in Blazor Rich Text Editor Component

29 Nov 202414 minutes to read

The Blazor 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 Blazor Rich Text Editor component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

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

Accessibility Criteria	Compatibility
WCAG 2.2 Support
Section 508 Support
Screen Reader Support
Right-To-Left Support
Color Contrast
Mobile Device Support
Keyboard Navigation
Axe-core Accessibility Validation

- 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.

WAI-ARIA attributes

The toolbar of Blazor Rich Text Editor, assigned the role of Toolbar and has the following list of WAI-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 Blazor 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.

CSHTML
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor ShowCharCount="true">
    <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 <b>IFRAME</b> and <b>DIV</b> 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>
    </ul>
</SfRichTextEditor>

Blazor RichTextEditor with accessibility

Keyboard interaction

The Blazor 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 Blazor 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 Blazor 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` + `=`
Full screen	`Ctrl` + `Shift` + `f`
Ordered list	`Ctrl` + `Shift` + `o`
Unordered list	`Ctrl` + `Alt` + `o`

CSHTML
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor EditorMode="EditorMode.Markdown">
    <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 <b>IFRAME</b> and <b>DIV</b> 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>
    </ul>
</SfRichTextEditor>

Blazor RichTextEditor with key configuration

Ensuring accessibility

The Blazor Rich Text Editor component’s accessibility levels are ensured through an axe-core software tool 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.

Custom key configuration

Customize the key configuration for the keyboard interaction of the Rich Text Editor using the KeyConfigure property.

In the following code block, customize the bold and italic, toolbar actions with ctrl+1, ctrl+2 respectively.

CSHTML
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor KeyConfigure="@KeyConfig">
    <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 <b>IFRAME</b> and <b>DIV</b> 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>
    </ul>
</SfRichTextEditor>

@code {
    private ShortcutKeys KeyConfig = new ShortcutKeys()
    {
        Bold = "ctrl+1",
        Italic = "ctrl+2"
    };
}

NOTE

You can refer to our Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to knows how to render and configure the rich text editor tools.