Accessibility in Blazor Markdown Editor Component

8 Oct 20256 minutes to read

The Blazor Markdown 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 Markdown 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 Markdown 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 the 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 in the Blazor Markdown Editor is assigned the role of toolbar and includes the following WAI-ARIA attribute.

Property Functionalities
role="toolbar" Describes the actual role of the toolbar element.
aria-orientation Indicates the toolbar orientation. Default is horizontal.
aria-haspopup Indicates whether the toolbar has a popup. Default is false. Set to true wwhen popup mode is enabled.
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 information about toolbar ARIA attributes, refer to the accessibility of Toolbar documentation.

The Blazor Markdown Editor element is assigned the role of application:

Property Functionalities
role="application" Describes the actual role of the Markdown Editor element.
aria-disabled Indicates the disabled state of the toolbar. 
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor ShowCharCount="true" Value="@MarkdownValue" EditorMode="EditorMode.Markdown">

</SfRichTextEditor>

@code{

    private string MarkdownValue { get; set; } = @"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.";

}

Blazor Markdown Editor with accessibility

Keyboard interaction

The Blazor Markdown Editor component follows the keyboard interaction guidelines, 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.

Ensuring accessibility

Accessibility levels are validated using the axe-core software tool 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.

Custom key configuration

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

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

@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor KeyConfigure="@KeyConfig" Value="@MarkdownValue">
  
</SfRichTextEditor>

@code {
    
    private string MarkdownValue = "The sample is configured with customized markdown syntax using the [RichTextEditorMarkdownOptions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorMarkdownOptions.html).\n    Type the content and click the toolbar item to view customized markdown syntax.\n    + To make a phrase bold, you need to add two underscores before and after the phrase (e.g., __this text is bold__).";

    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 Markdown Editor example to knows how to render and configure the Markdown Editor tools.

See also