Accessibility in Mention

17 Jan 20246 minutes to read

Web accessibility makes web contents and applications more accessible to people with disabilities. The Mention control provides built-in compliance with WAI-ARIA specifications. The WAI-ARIA support is achieved using attributes such as aria-selected and aria-activedescendent.

The Mention 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 Mention 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 Yes
Mobile Device Support Yes
Keyboard Navigation Support Yes
Accessibility Checker Validation 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 Mention control uses the Listbox role where each list item has an option role. The following ARIA attributes denote the Mention state.

Properties Functionalities
aria-selected Indicates the selected option.
aria-activedescendent This attribute holds the ID of the active list item to focus its descendant child element.
aria-owns This attribute contains the ID of the popup list to indicate popup as a child element.

Keyboard interaction

You can use the following key shortcuts to access the Mention without interruptions.

Keyboard shortcuts Actions
Arrow Down Selects the first item in the Mention list. Otherwise, selects the item next to the currently selected item.
Arrow Up Selects the item previous to the currently selected one.
Esc(Escape) Closes the popup list when it is in an open state.
Enter Selects the focused item, and when it is in an open state the popup list closes.
Tab Focuses on the next TabIndex element on the page when the popup is closed. Otherwise, inserts the selected popup list item and closes the popup list. 
@{
    List<Employees> data = new Employees().GetData();
    char nameMentionChar = '@';
}

<div id="mentionElement" placeholder = "Type @@ and tag employee"></div>
<ejs-mention id="comments" mentionChar="@nameMentionChar" dataSource="@data" target="#mentionElement" >
    <e-mention-fields text="Name"></e-mention-fields>
</ejs-mention>


<style>

    div#mentionElement[placeholder]:empty:before {
        content: attr(placeholder);
    }

    #mentionElement{
        min-height: 100px; 
        border: 1px solid #D7D7D7;
        border-radius: 4px; 
        padding: 8px; 
        font-size: 14px; 
        width: 600px;
    }
    
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace WebApplication1.Models
{
    public class Employees
    {
        public string Name { get; set; }
        public string ID { get; set; }
        public List<Employees> GetData()
        {
            List<Employees> data = new List<Employees>
            {
                new Employees() { Name = "Andrew Fuller", ID = "1" },
                new Employees() { Name = "Anne Dodsworth", ID = "2" },
                new Employees() { Name = "Janet Leverling", ID = "3" },
                new Employees() { Name = "Laura Callahan", ID = "4" },
                new Employees() { Name = "Margaret Peacock", ID = "5" }
            };
            return data;
        }
    }
}

Ensuring accessibility

The Mention component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

The accessibility compliance of the Mention component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Mention component with accessibility tools.

See also