Accessibility in Blazor Mention Component

29 Nov 20246 minutes to read

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

The Blazor 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 Blazor 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
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 Blazor Mention component is designed to be compliant with WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) specifications, which provide guidelines and standards for making web content more accessible to people with disabilities. To achieve WAI-ARIA support, the Mention uses attributes such as aria-selected and aria-activedescendent.

The aria-selected attribute is used to indicate that an element is currently selected or has been selected in the past, while the aria-activedescendent attribute is used to indicate the currently active descendant element of a composite widget.

It uses the various ARIA attributes (Accessible Rich Internet Applications) to denote the state of the component and provide additional information to assistive technologies such as screen readers. These attributes can help users who rely on assistive technologies to understand and interact with the Mention component more easily.

Here are some of the ARIA attributes that might be used to denote the state of a mention list item:

Properties Functionalities
aria-selected Indicates the currently selected option in the list of mention suggestions
aria-activedescendent This attribute holds the ID of the active list item to focus its descendant child element.
aria-owns Indicate that the Mention component owns or controls the popup list of mention suggestions.

Keyboard interaction

You can use the following key shortcuts to access the Blazor Mention without interruptions. It allows users to quickly perform actions or navigate through an application using keyboard input.

Keyboard shortcuts Actions
Down arrow Focus the first item in the Mention list. Otherwise, focus the item next to the currently focused item.
Up arrow Focus the item previous to the currently focused 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 tab index element on the page when the popup is closed. Otherwise, inserts the selected popup list item and closes the popup list.
  • RAZOR
    • @using Syncfusion.Blazor.DropDowns

<SfMention TItem="Employees" DataSource="@data">
    <TargetComponent>
        <div id="commentsMention" placeholder="Type @@ and tag employee" ></div>
    </TargetComponent>
    <ChildContent>
        <MentionFieldSettings Text="Name" Value="ID"></MentionFieldSettings>
    </ChildContent>
</SfMention>

<style>
    #commentsMention {
        min-height: 100px;
        border: 1px solid #D7D7D7;
        border-radius: 4px;
        padding: 8px;
        font-size: 14px;
        width: 600px;
    }
    div#commentsMention[placeholder]:empty:before {
        content: attr(placeholder);
        color: #555;
    }
</style>

@code {

    public class Employees
    {
        public string Name { get; set; }
        public string ID { get; set; }
    }

    public 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" }
    };
}

    Ensuring accessibility

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