Skip to main content
BuyLog In
Business Intelligence Dashboard
Search in…
Docs > Web Dashboard > Accessibility (Viewer Mode)
All docs
V25.1
    • Business Intelligence Dashboard
    Get Started
    .NET Support
    What's New
    Basic Concepts and Terminology
    Common Features
    WinForms Dashboard
    Web Dashboard
    Prerequisites
    Concepts and Terminology
    Integrate the Dashboard Component into a Web App
    Create Dashboards on the Web
    UI Elements and Customization
    Advanced Customization
    Accessibility (Viewer Mode)
    WPF Dashboard Viewer
    Visual Studio Integration
    Redistribution and Deployment
    Video Tutorials
    Migration Guides
    Examples
    End-User Documentation
    .NET Framework API Reference
    .NET API Reference
    HTML JS Control API Reference
    ASP.NET Client API Reference
    Download CHM

    Accessibility for Web Dashboard (Viewer Mode)

    • 5 minutes to read

    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 Features Overview

    Accessibility Requirement Support Level
    Keyboard Navigation Support icon-yesno
    Screen Reader Support icon-yesno
    Contrast Color Theme Icon-yes
    Lighthouse Accessibility Validation Icon-yes
    Axe Accessibility Validation Icon-yes
    WAVE Accessibility Validation Icon-yes

    Supported - All component features meet the requirement

    Partly supported - Component features partially meet the requirement

    Not supported - Accessibility requirement is not met

    Dashboard Item Accessibility

    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 Partly supported Accessibility for Data Grid
    ChartItem
    ScatterChartItem    		 dxChart Not supported Navigation is not available inside the component.
    Screen reader cannot read the component content.
    PieItem an array of dxPieChart components Not supported Navigation is not available inside the component.
    Screen reader cannot read the component content.
    GaugeItem an array of dxCircularGauge or dxLinearGauge components Not supported Navigation is not available inside the component.
    Screen reader cannot read the component content.
    ChoroplethMapItem
    GeoPointMapItem
    PieMapItem
    BubbleMapItem    		 dxVectorMap Not supported Navigation is not available inside the component.
    Screen reader cannot read the component content.
    PivotItem dxPivotGrid Not supported Navigation is not available inside the component.
    Screen reader cannot read the component content.
    ComboBoxItem dxSelectBox
    dxTagBox    		 Partly supported More details:
    Accessibility for SelectBox
    Accessibility for TagBox
    ListBoxItem dxList Partly supported Accessibility for List
    TreeViewItem dxTreeList Partly supported Accessibility for TreeList
    TreemapItem dxTreeMap Not supported Navigation is not available inside the component.
    Screen reader cannot read the component content.
    RangeFilterItem dxRangeSelector Not supported Navigation is not available inside the component.
    Screen reader cannot read the component content.
    CardItem CardWidget Supported Screen reader and keyboard navigation are supported
    DateFilterItem DateFilterWidget Supported Screen reader and keyboard navigation are supported
    TextBoxItem HTML element / HTML element wrapped in a jQuery object Supported Screen reader and keyboard navigation are supported
    ImageItem HTML element / HTML element wrapped in a jQuery object Supported You can specify alt text as a substitute for an image.
    BoundImageItem HTML element / HTML element wrapped in a jQuery object Supported You can specify alt text as a substitute for images.
    GroupItem No underlying widget Supported Screen reader and keyboard navigation are supported
    DashboardTabPage No underlyuing widget Supported Screen reader and keyboard navigation are supported
    TabContainerItem No underlyuing widget Supported Screen reader and keyboard navigation are supported
    CustomItem A custom component that you can customize directly. Supported Accessibility support depends on custom item implementation

    Screen Reader Support

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

    Contrast Color Theme

    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:

    Keyboard Navigation

    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

    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

    Dialogs

    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.