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).
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.
- All component features include keyboard support.
- There are several component features do not include keyboard support.
| Component | Keyboard Support | Comments |
|---|---|---|
| DxAccordion | |
Keyboard Shortcuts |
| DxButton | |
|
| DxCalendar | |
Keyboard Shortcuts |
| DxCheckBox | |
|
| DxComboBox | |
Keyboard Shortcuts |
| DxContextMenu | |
Keyboard Shortcuts |
| DxDateEdit | |
Keyboard Shortcuts |
| DxFileInput | |
Keyboard Shortcuts |
| DxFlyout | |
|
| DxFormLayout | |
Tab navigation is not supported. |
| DxGrid | |
Keyboard Shortcuts |
| DxHtmlEditor | |
Keyboard Shortcuts |
| DxListBox | |
Keyboard Shortcuts |
| DxMaskedInput | |
|
| DxMemo | |
|
| DxMenu | |
Keyboard Shortcuts |
| DxPager | |
|
| DxPivotGrid | |
Data area is not accessible. |
| DxPopup | |
|
| DxRadio | |
|
| DxRadioGroup | |
|
| DxRichEdit | |
Keyboard Shortcuts |
| DxSpinEdit | |
|
| DxTagBox | |
Keyboard Shortcuts |
| DxTextBox | |
|
| DxTimeEdit | |
Keyboard Shortcuts |
| DxToolbar | |
Keyboard Shortcuts |
| DxTreeView | |
Keyboard Shortcuts |
| DxUpload | |
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.
<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).
Right-to-Left (Not Supported)
Blazor components do not support right-to-left languages.