All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Accessibility in Reporting for Web

  • 4 minutes to read

The Document Viewer component can be used in accessible applications that meet Section 508 standards and conform to level AA of the Web Content Accessibility Guidelines. The VPAT (Voluntary Product Accessibility Template) summary for the Document Viewer is available in the following document: VPAT v2.4: DevExpress Document Viewer for Web.

Overview

The component's accessibility compliance is based on the following key principles:

Proper HTML Semantics

Document Viewer UI elements use the WAI-ARIA specification to add semantics to page markup. ARIA attributes give the screen reader information for vocalization and navigation.

TIP

You can use the NVDA screen reader to test your application.

When the screen reader encounters a UI element, it reads the aria-label tag. ARIA labels for most UI elements are bound to localization strings. You can add a custom localization string to specify a custom label that the screen reader vocalizes.

To load a custom localization string, use satellite assemblies (ASP.NET WEB Forms and MVC) or handle the client-side CustomizeLocalization event. For more information on localization, review the following help topics:

ASP.NET Web Forms ASP.NET MVC ASP.NET Core
Localization Localization Localization in ASP.NET Core Application

When the document page is selected, the user can press Enter to activate Document Read mode to navigate the page content. Some page elements (bricks) such as images, shapes, and charts are not labeled and vocalized.

Keyboard Support

In accessibility mode, all interactive and navigation controls contained in the following UI elements are accessible by keyboard and display a keyboard-focus indicator:

  • Toolbar
  • Tab Panel
  • Tabs in the Tab Panel: Parameters, Export Options, Search, Document Map
  • Document page

The user can access UI elements with the Tab key, use arrow keys to navigate element contents and trigger actions with a keyboard. For more information, review the following help topic: Document Viewer - Keyboard Navigation in Accessibility Mode.

Visual Accessibility

You can change style options (colors, font size and family) to improve readability.

In Accessibility mode, font sizes are measured in rem units. All fonts in the Document Viewer are relative to the font size specified in the document root. You can specify the base font size in the html selector or adjust the browser font settings to improve readability.

You can apply the "Contrast" theme to the Document Viewer to make it accessible for visually impaired users. You can also change the color scheme for any theme to meet the accessibility guidelines related to color contrast.

The code snippet that specifies the root font size and applies the Contrast theme is shown in the How to Enable Accessibility Mode section.

For more information on color schemes, refer to the following help topics:

ASP.NET Web Forms ASP.NET MVC ASP.NET Core
Customize the Document Viewer Color Scheme Customize the Document Viewer Color Scheme Customize the Document Viewer Color Scheme in ASP.NET Core Application

How to Enable Accessibility Mode

Set the AccessibilityCompliant option to true to enable Accessibility mode. The table below explains how to set this option for different platforms.

ASP.NET Web Forms and MVC ASP.NET Core
Set the ASPxWebDocumentViewer.AccessibilityCompliant property to true Call the WebDocumentViewerBuilder.AccessibilityCompliant method with the true parameter.

The code below enables accessibility mode, applies the Contrast theme, and sets the root font size to 20px (equivalent to 125% zoom).

<style>
    html {
        font-size: 20px;
    }
</style>
<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server"
    AccessibilityCompliant="true" ColorScheme="contrast">
</dx:ASPxWebDocumentViewer>