Accessibility for Web Document Viewer
- 6 minutes to read
Accessibility features help users who have a physical disability, such as restricted mobility or limited vision, to use information technology products. This article describes accessibility areas that we take into consideration when developing the DevExpress Web Document Viewer.
The DevExpress Web Document Viewer 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 DevExpress Web Document Viewer satisfies these requirements, refer to the following DevExpress Accessibility Conformance Report (ACR):
#Accessibility Features Overview
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 Mode
Set the AccessibilityCompliant
option to true
to enable Accessibility mode. The table below explains how to set this option for different platforms.
ASP. |
ASP. |
Angular | React |
---|---|---|---|
Set the ASPxtrue |
Call the Webtrue parameter. |
Set the control’s accessibility property to true . |
Set the control’s accessibility property to true . |
The following code snippet enables accessibility mode:
<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server"
AccessibilityCompliant="true">
</dx:ASPxWebDocumentViewer>
#Screen Reader Support
The Document Viewer for Web component supports screen readers and complies to WAI-ARIA standards. Exceptions are listed in the Web Document Viewer ACR (Aug 2024).
For screen readers, you can specify custom text that the screen reader can vocalize instead of an element’s default content. Refer to the AccessibleDescription topic for more details.
#Contrast Color Theme
You can change style options (colors, font size, 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 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 accessibility guidelines related to color contrast.
The code snippet that specifies the root font size and applies the Contrast theme is shown in the Accessibility Mode section.
For more information on color schemes, refer to the following help topics:
ASP. |
ASP. |
ASP. |
---|---|---|
Customize the Document Viewer Color Scheme (ASP. |
Customize the Document Viewer Color Scheme (ASP. |
Customize the Document Viewer Color Scheme (ASP. |
#Keyboard Navigation
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
- Document page
- Drill-trough breadcrumbs
- Tab Panel
- Tabs in the Tab Panel: Parameters, Export Options, Search, Document Map, and custom panels.
#Toolbar
Action | Shortcut Key |
---|---|
Move focus from the browser to the Document Viewer Toolbar | Tab |
Move focus to the next item in toolbar | Right Arrow |
Move focus to the previous item in toolbar | Left Arrow |
Activate the selected toolbar editor Note: When you select the Search button, the Search Tab is opened and focused |
Enter or Space |
Open and display a drop-down list or menu | Alt + Down Arrow |
Move between editor values in the activated Pager or Zoom combo box | Up Arrow, Down Arrow |
Deactivate the combo box | Esc |
#Document Page
Action | Shortcut Key |
---|---|
Move focus to the Document Area (or to Drill-Through breadcrumbs if displayed) | Tab |
Enter Document Read mode | Enter or Space |
Move between bricks on a page | Right Arrow, Left Arrow |
Exit Document Read mode | Tab, Shift + Tab |
#Tab Panel
Action | Shortcut Key |
---|---|
Move focus to the Tab panel | Tab |
Move between tabs in the Tab panel | Up Arrow and Down Arrow |
Open or close the selected tab | Enter or Space |
#Preview Parameters Tab
Action | Shortcut Key |
---|---|
Move to the next control inside the tab | Tab |
Move to the previous control inside the tab | Shift + Tab |
Activate the parameter editor | Enter or Space |
Move to the browser toolbar from the last editor | Tab |
Move to the Tab panel from the first editor | Shift + Tab |
#Export Options Tab
Action | Shortcut Key |
---|---|
Move to the next control inside the tab | Tab |
Move to the previous control inside the tab | Shift + Tab |
Move to the first control inside the tab | Home |
Move to the last control inside the tab | End |
Open the selected section | Enter or Space |
Toggle the checkbox state | Enter or Space |
Display a list of values in a combo box | Alt + Down |
Deactivate the editor and move to the next editor | Tab |
Move to the browser toolbar from the last editor | Tab |
Move to the Tab panel from the first editor | Shift + Tab |
#Search Tab
Action | Shortcut Key |
---|---|
Move to the next control inside the tab | Tab |
Move to the previous control inside the tab | Shift + Tab |
Move to the browser toolbar from the last editor | Tab |
Move to the Tab panel from the first editor | Shift + Tab |
Search a document for the specified text | Enter |
Navigate to the next search results when the list with the result is selected | Down Arrow |
Navigate to the previous search results when the list with the result is selected | Up Arrow |
Highlight the matching text in the document Note: The Search tab remains focused. |
Enter |
Exit the Search result list | Shift + Tab |
Move to the browser toolbar from the last editor | Tab |
Move to the Tab panel from the first editor | Shift + Tab |
#Document Map Tab
Action | Shortcut Key |
---|---|
Expand the document’s bookmark tree | Alt + Right Arrow |
Collapse the document’s bookmark tree | Alt + Left Arrow |
Open the document page that contains the bookmark and highlight the bookmark Note: The Document Map tab remains focused |
Enter |
Move to the browser toolbar from the last editor | Tab |
Exit the Document Map Tab and move to the Tab Panel | Shift + Tab |
#Common Keyboard Shortcuts
The following keyboard shortcuts work even when Accessibility Mode is disabled: Keyboard Shortcuts in Report Designer and Document Viewer for Web.