Skip to main content
All docs
V24.1

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Accessibility

  • 3 minutes to read

DevExpress Blazor components are designed to help you create web applications that conform to accessibility guidelines. This section describes accessibility areas that we take into consideration when developing our components.

#Accessibility Standards and Guidelines

Many DevExpress Blazor components comply with WCAG 2.2 (Level AA), Section 508, and EN 301 549 standards. To learn more about how Blazor components satisfy these requirements, refer to the DevExpress Accessibility Conformance Report (ACR).

Download: DevExpress Blazor ACR v24.1(based on VPAT®)

#Keyboard Support

Keyboard accessibility is one of the most important principles of Web accessibility because it cuts across disability types and technologies. Most Blazor components support keyboard navigation. This means that users who rely on alternative input methods can navigate and interact with application content.

The table below lists components that support keyboard navigation.

supports - All component features include keyboard support.
partially supports - There are several component features do not include keyboard support.

Component Keyboard Support Comments
DxAccordion supports Keyboard Shortcuts
DxButton supports
DxCalendar supports Keyboard Shortcuts
DxCheckBox supports
DxComboBox supports Keyboard Shortcuts
DxContextMenu supports Keyboard Shortcuts
DxDateEdit supports Keyboard Shortcuts
DxFileInput supports Keyboard Shortcuts
DxFlyout supports
DxFormLayout partially supports Tab navigation is not supported.
DxGrid supports Keyboard Shortcuts
DxHtmlEditor supports Keyboard Shortcuts
DxListBox supports Keyboard Shortcuts
DxMaskedInput supports
DxMemo supports
DxMenu supports Keyboard Shortcuts
DxPager supports
DxPivotGrid partially supports Data area is not accessible.
DxPopup supports
DxRadio supports
DxRadioGroup supports
DxRichEdit supports Keyboard Shortcuts
DxSpinEdit supports
DxTagBox supports Keyboard Shortcuts
DxTextBox supports
DxTimeEdit supports Keyboard Shortcuts
DxToolbar supports Keyboard Shortcuts
DxTreeView supports Keyboard Shortcuts
DxUpload supports Keyboard Shortcuts

#WAI-ARIA Attributes

We are committed to ensuring that our components comply with WAI-ARIA standards. Most Blazor components contain WAI-ARIA attributes, such as role, property, and state information, to provide additional semantics and improve accessibility.

#Customize Accessibility Information for Internal Elements

Elements inside Blazor components, such as buttons, provide information intended for use by assistive technology tools. This information is maintained in DxBlazorStringId enumeration strings that have the following name pattern: A11y_{string_name}, for instance, A11y_Pager_FirstPage.
You can customize string values with our localization mechanism.

#Specify Accessibility Information for an Editor

Create a separate label to add accessible information to your editors.

Razor
<label for="label1">Text</label>  
<DxTextBox InputId="label1"/>

You can create a hidden label that is not visible on the page, but is read by screen reader tools.

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

This approach is demonstrated in the following demo: Blazor Data Editors - Overview.

If you use the DxFormLayout component to arrange editors, the component renders the Caption property value as the <label> element with the specified for attribute.

Razor
<DxFormLayout>
    <DxFormLayoutItem Caption="Name:" ... >
        <DxTextBox InputId="label1" ... />
    </DxFormLayoutItem>
    ...

The rendered code:

html
<label for="label1" ... >
    Name:
</label>
...
<input id="label1" type="text" ... >

#Apply ARIA Attributes to a Component

You can use HTML attributes including ARIA attributes to configure Blazor components.

The following code sample specifies the aria-label attribute for a TextBox:

Razor
<DxTextBox aria-label="User's first name" />

Refer to the following topic for more information: HTML Attributes in Editors.

#User Agents

DevExpress Blazor components work well in mobile applications. Our components support responsive render, touch targets, and mobile-friendly interfaces. Refer to the following section for the list of supported browsers: Supported Browsers.

Users can utilize various screen reader software and other assistive technology tools. In our assessments, we ran automatic tests with the Axe accessibility testing engine and WAVE web accessibility evaluation tool. We also conducted manual tests with the NVDA screen reader.

#Component Size

You can apply different size modes to DevExpress Blazor components and their elements. Larger control sizes simplify information perception and control interaction (useful for people with vision impairment and motor disabilities).

ComboBox - Size modes

#Right-to-Left (Not Supported)

Blazor components do not support right-to-left languages.