Accessibility in the ASP.NET MVC Rich Text Editor Control

17 Mar 20255 minutes to read

The Rich Text Editor control 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 control 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 Support Yes
Accessibility Checker Validation Intermediate
Axe-core Accessibility Validation Yes
Yes - All features of the control meet the requirement.
Intermediate - Some features of the control do not meet the requirement.
No - The control 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. The 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 Rich Text Editor. 
@Html.EJS().RichTextEditor("accessibility").Value(ViewBag.value).Render()
public class HomeController : Controller {
    public ActionResult Index () {
        
        ViewBag.value = @"<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

        return View();

    }
}

Keyboard Navigation

The Rich Text Editor control 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 control.

For more details on keyboard navigation, refer to the Keyboard support documentation.

Ensuring accessibility

The Rich Text Editor control’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 control is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Rich Text Editor control with accessibility tools.

See Also