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.