Skip to main content
BuyLog In
Blazor
Search in…
Docs > Common Concepts > Accessibility
All docs
V23.2
Blazor Components
Prerequisites
Supported Browsers
Get Started
Demos
Examples
Videos
Common Concepts
Data Binding
Accessibility
Localization
Optimize Performance of a Blazor WASM Application
Reduce Size of a Blazor WASM Application
Reuse and Customize Components
Redistribution and Deployment
Test Components with bUnit
Add Components to the Toolbox
Components
Styling and Themes
Security Considerations
Troubleshooting
Blazor & WinForms App UI Framework (Powered by EF Core)
Maintenance Mode
API Reference
Download CHM

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

DevExpress Blazor components comply with the following standards:

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 do 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
DxButton supports
DxCalendar supports
DxCheckBox supports
DxComboBox partially supports If custom values are prohibited (the AllowUserInput is set to false)
and the editor displays the Clear button, input can be cleared by the button click only.
DxContextMenu supports Keyboard Shortcuts
DxDateEdit partially supports Drop-down window cannot be accessed.
DxFlyout supports
DxFormLayout partially supports Tab navigation is not supported.
DxGrid partially supports Virtual scrolling is not supported. 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
DxSpinEdit supports
DxTagBox partially supports Navigation between selected tags is not supported.
DxTextBox supports
DxTimeEdit partially supports Drop-down window cannot be accessed.
DxToolbar supports Keyboard Shortcuts

WAI-ARIA Attributes

We strive for our components to 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.

<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.

<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.

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

The rendered code:

<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:

<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.