Blazor Rich Text Editor Accessibility

9 Oct 20256 minutes to read

The Blazor Rich Text Editor is designed in compliance with WAI-ARIA specifications, applying the appropriate roles, states, and properties. This ensures that the component is accessible to users who rely on assistive technologies (AT) or keyboard navigation.

The Blazor Rich Text Editor follows established accessibility guidelines, 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 Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Intermediate
Mobile Device Support Yes
Keyboard Navigation Yes
Axe-core Accessibility Validation Yes
Yes - All features of a component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

The toolbar of the Blazor Rich Text Editor is assigned the toolbar role and supports the following WAI-ARIA attributes:

Property Functionalities
role=”toolbar” This attribute added to the ToolBar element describes the actual role of the element.
aria-orientation Indicates the toolbar’s orientation. The default value is horizontal.
aria-haspopup Indicates if the toolbar has a popup. When popup mode is enabled, this value is set to true. The default is false.
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 WAI-ARIA attributes, refer to the accessibility of Toolbar documentation.

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

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. 
@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 follows keyboard interaction guidelines, making it easy for people who use assistive technologies (AT) or rely solely on keyboard navigation. The component supports a variety of keyboard shortcuts for common actions.

For a complete list of keyboard shortcuts, refer to the Keyboard Support documentation.

Ensuring accessibility

The Blazor Rich Text Editor component’s accessibility is validated using the axe-core software tool during automated testing.

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

Custom key configuration

You can customize the key configurations for keyboard interactions in the Rich Text Editor using the KeyConfigure property.

In the following example, the bold and italic actions are customized to use Ctrl+1 and Ctrl+2, respectively.

@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 explore the Blazor Rich Text Editor feature tour page to see its capabilities. You can also refer to the Blazor Rich Text Editor demo to learn how to render and configure the component and its tools.

See also