Blazor — Accessibility Enhancements and Options

In our last major update (v23.2), we modified element structure to improve screen reader compatibility, added alternate text descriptions, and WAI-ARIA roles/attributes for the following DevExpress Blazor UI components:

• Grid
• Data Editors
• TreeView
• Toolbar
• Menu and Context Menu

We also introduced keyboard navigation and shortcuts for the following Blazor UI components:

• Grid
• Calendar
• Toolbar
• Menu
• Context Menu

These accessibility-related capabilities are available "out-of-the-box." You can also extend accessibility in code. For instance, you can specify available descriptions for individual editors and control inner elements.

To learn more, please refer to the following help topic: Accessibility documentation.

Accessible Labels for Editors

Due to app design, editors within your app may not require a label. This, however, could lead to warnings during accessibility assessment and make it harder for users who reply upon screen readers. You can add a hidden label that is readable by screen reader software but not displayed on the page to address this use case. Use one of the following options to introduce this behavior to your DevExpress-powered Blazor app:

• Create a separate label to add accessible information to an editor.

  <label for="label1" style="display: none">Text</label>  
  <DxTextBox InputId="label1"/>

• Apply aria-label attribute directly to the editor.

  <DxTextBox aria-label="Text" />

In both instances, the editor will render the input element with the specified aria-label attribute - one that can be read and pronounced by screen readers.

<div ... >
    <div ... >
        <div>
            <input aria-label="Text" ... >
        </div>
    </div>
</div>

Accessible Descriptions for Control Inner Elements

With localizable strings, text within control inner elements (such as buttons and our Blazor Grid’s search box) can be modified.

For example, the DxBlazorStringId.Grid_SearchBoxNullText property can be set to Search... (to modify null text used in the search field).

In our v23.2 release cycle, we created localization strings designed for use with assistive technology tools. If your customers use assistive technologies, you can offer additional information to help improve overall usability. The naming pattern for these strings is A11y_{string_name}.

In the following code snippet, the static XtraLocalizer object is used to provide null text and an accessible description of the search box. Though this description does not change control appearance, it does impact how individuals with visual impairments are able to process on-screen information.

protected override async Task OnInitializedAsync() {
    XtraLocalizer.QueryLocalizedString += new EventHandler(XtraLocalizer_QueryLocalizedString);
}

static private void XtraLocalizer_QueryLocalizedString(object sender, XtraLocalizer.QueryLocalizedStringEventArgs e) {
    if (e.StringIDType == typeof(DxBlazorStringId)) {
        if ((DxBlazorStringId)e.StringID == DxBlazorStringId.Grid_SearchBoxNullText)
            e.Value = "Search...";
        if ((DxBlazorStringId)e.StringID == DxBlazorStringId.A11y_Grid_SearchBox)
            e.Value = "Enter search criteria. Use the space key to enter multiple search values.";
}

What's Next

To learn more about our next major update (v24.1) and accessibility-related features we expect to release in June, please refer to the following blog post: Roadmap (24.1).

Your Feedback Matters

As always, we welcome your feedback. Please take a moment to answer the following survey questions and help us shape accessibility-related development strategies for 2024:

Free DevExpress Products - Get Your Copy Today