Reporting — Accessible Document Viewer for Web (Available in v20.2.6)

We recently improved accessibility support within our Web Document Viewer component. We’ve done our best to address Section 508 standards and Web Content Accessibility Guidelines. We also published our VPAT (Voluntary Product Accessibility Template) summary for those interested: VPAT v2.4: DevExpress Document Viewer for Web.

Key Features

The Web Document Viewer component includes an AccessibilityCompliant boolean property that activates accessibility compliant usage mode. For more information on this property, please refer to the Web Reporting - Accessibility. The following is a brief summary of what you can expect when you enable this option.

Keyboard Support

Accessibility compliant mode enables keyboard navigation within the Document Viewer and displays a keyboard-focus indicator:

The following UI elements are accessible when using a keyboard:

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

For more information review the following help topic: Document Viewer - Keyboard Navigation in Accessibility Mode.

Proper HTML Semantics

The Document Viewer includes support for the WAI-ARIA standard. This allows users to leverage assistive technologies such as screen readers (e.g., NVDA) to obtain information about the Document Viewer’s user interface elements and associated purpose:

When you select a report page, press Enter to activate Document Read mode. This mode allows you to navigate through the page and ascertain content information:

Visual Accessibility

Visual accessibility allows you to modify style options (colors, font size, and family) so that impaired users can better perceive information.

The Web Document Viewer respects browser font size settings. In addition, Document Viewer UI elements use font sizes relative to the font size specified at the document root. As such, you can enlarge all fonts with one setting. For instance, the following CSS selector increases font size used within the Document Viewer:

    html {
        font-size: 20px;
    }

The contrast application theme is available out-of-the-box. You can also modify color schemes (for any theme) to meet accessibility guidelines related to color contrast.

Take a Feature Tour Online

We published an online Accessibility demo to better demonstrate this functionality and allow you to interact with the component directly: Web Document Viewer - Accessibility Demo.

Your Feedback Matters

As always, we welcome your thoughts. Please comment below and let us know what you think about our implementation. Should you have technical questions, feel free to contact us via the DevExpress Support Center.

Free DevExpress Products - Get Your Copy Today