dashboard-404964-web-dashboard-dashboard-viewer-web-accessibility.md
Accessibility features help users who have physical disabilities, such as restricted mobility or limited vision. This article describes accessibility areas that we take into consideration when developing the Web Dashboard (Viewer Mode).
The Web Dashboard (Viewer Mode) takes into account accessibility guidelines such as WCAG 2.2 (Level AA), Section 508, and EN 301 549 standards. To learn more about how the Web Dashboard (Viewer Mode) satisfies these requirements, refer to the following DevExpress Accessibility Conformance Report (ACR):
Download: Web Dashboard Viewer ACR (Jan 2025)
| Accessibility Requirement | Support Level |
|---|---|
| Keyboard Navigation Support | |
| Screen Reader Support | |
| Contrast Color Theme | |
| Lighthouse Accessibility Validation | |
| Axe Accessibility Validation | |
| WAVE Accessibility Validation |
- All component features meet the requirement
- Component features partially meet the requirement
- Accessibility requirement is not met
Dashboard items are built with DevExtreme UI components. As such, dashboard accessibility features in Interaction mode depend on DevExtreme widget implementation. For additional information, review the corresponding help topic: DevExtreme jQuery - Accessibility Documentation for Components.
The following table gives you a quick breakdown of available dashboard items, corresponding DevExtreme UI components, and accessibility feature conformance:
| Dashboard Item | Underlying UI Component | Accessibility Compliance | Additional Information |
|---|---|---|---|
| GridItem | dxDataGrid | Accessibility for Data Grid | |
| ChartItem | |||
| ScatterChartItem | dxChart | Navigation is not available inside the component. | |
| Screen reader cannot read the component content. | |||
| PieItem | an array of dxPieChart components | Navigation is not available inside the component. | |
| Screen reader cannot read the component content. | |||
| GaugeItem | an array of dxCircularGauge or dxLinearGauge components | Navigation is not available inside the component. | |
| Screen reader cannot read the component content. | |||
| ChoroplethMapItem | |||
| GeoPointMapItem | |||
| PieMapItem | |||
| BubbleMapItem | dxVectorMap | Navigation is not available inside the component. | |
| Screen reader cannot read the component content. | |||
| PivotItem | dxPivotGrid | Navigation is not available inside the component. | |
| Screen reader cannot read the component content. | |||
| ComboBoxItem | dxSelectBox | ||
| dxTagBox | More details: | ||
| Accessibility for SelectBox | |||
| Accessibility for TagBox | |||
| ListBoxItem | dxList | Accessibility for List | |
| TreeViewItem | dxTreeList | Accessibility for TreeList | |
| TreemapItem | dxTreeMap | Navigation is not available inside the component. | |
| Screen reader cannot read the component content. | |||
| RangeFilterItem | dxRangeSelector | Navigation is not available inside the component. | |
| Screen reader cannot read the component content. | |||
| CardItem | CardWidget | Screen reader and keyboard navigation are supported | |
| DateFilterItem | DateFilterWidget | Screen reader and keyboard navigation are supported | |
| TextBoxItem | HTML element / HTML element wrapped in a jQuery object | Screen reader and keyboard navigation are supported | |
| ImageItem | HTML element / HTML element wrapped in a jQuery object | You can specify alt text as a substitute for an image. | |
| BoundImageItem | HTML element / HTML element wrapped in a jQuery object | You can specify alt text as a substitute for images. | |
| GroupItem | No underlying widget | Screen reader and keyboard navigation are supported | |
| DashboardTabPage | No underlyuing widget | Screen reader and keyboard navigation are supported | |
| TabContainerItem | No underlyuing widget | Screen reader and keyboard navigation are supported | |
| CustomItem | A custom component that you can customize directly. | Accessibility support depends on custom item implementation |
The Web Dashboard in Viewer mode supports screen readers and complies with WAI-ARIA standards. The exceptions are listed in the Web Dashboard Viewer ACR (Jan 2025).
You can change theme options (colors, font size, and family) to improve readability, and create and apply a custom theme to meet the accessibility guidelines related to color contrast.
For more information on color schemes, refer to the following “Themes and Styles” help topics:
The Web Dashboard component (Viewer mode) supports keyboard interaction in two modes: Navigation mode and Interaction mode.
In Navigation mode, you can navigate between the following elements in the dashboard layout:
| Action | Key |
|---|---|
| Navigate between dashboard layout elements. | Tab or Shift+Tab |
| Switch to Interaction mode when the focus is on a dashboard item. | Enter |
| Exit Interaction mode. | Esc |
The Dashboard title is based on the dxToolbar. The keyboard navigation in dxToolbar is described in detail in the following help topic: JavaScript/jQuery Toolbar - Accessibility.
Interaction mode allows you to navigate within the dashboard item: you can navigate through the dashboard item caption elements and dashboard item content.
Most dashboard items are based on DevExtreme widgets. Keyboard navigation is described in detail in the component’s corresponding help topic: DevExtreme jQuery - Accessibility Documentation for Components.
The dashboard item caption is based on dxToolbar. Keyboard navigation in dxToolbar is described in detail in the following help topic: JavaScript/jQuery Toolbar - Accessibility.
For dashboard items that are not based on the DevExtreme widget, use the following keystrokes:
| Action | Key |
|---|---|
| Enter Interactivity mode. | Enter |
| Apply a card as a Master Filter. | Enter |
| Toggle a predefined interval in a Date Filter item. | Enter |
| Navigate between cards in a Card item. | Arrows |
| Navigate between elements in a dashboard item caption. | Tab or Shift+Tab |
| Exit Interactivity mode. | Esc |
The following dialogs are available in the Web Dashboard (Viewer mode):
The dialogs used in Web Dashboard follow common accessibility practices for creating web applications.