Document Viewer - Accessibility

• Nov 01, 2024
• 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.

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 Standards Compliance

The Document Viewer for Web component complies to Section 508 and WCAG 2.x standards criteria. We have not encountered any issues other than the following:

Section 508 criteria	WCAG 2.x criteria	Exception description
	1.3.1 Info and Relationships	In the Document Page area, assistive technology cannot programmatically determine which column header is associated with a specific cell.
	1.3.2 Meaningful Sequence	The reading sequence is determined by the order in which visual elements of the document (bricks) are created when a report is processed. This order may not correspond to the visual order on the page.
	3.1.1 Language of Page	The component does not expose UI language information to assistive technologies. A developer can specify a language in the page that contains the component.

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	Angular	React
Set the ASPxWebDocumentViewer.AccessibilityCompliant property to true	Call the WebDocumentViewerBuilder.AccessibilityCompliant method with the true parameter.	Set the control’s accessibilityCompliant property to true.	Set the control’s accessibilityCompliant property to true.

The following code snippet enables accessibility mode:

ASP.NET Web Forms

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server"
    AccessibilityCompliant="true">
</dx:ASPxWebDocumentViewer>

ASP.NET MVC

@Html.DevExpress().WebDocumentViewer(settings =>
{
    settings.Name = "WebDocumentViewer1";
    settings.AccessibilityCompliant = true;
}).Bind("TestReport").GetHtml()

ASP.NET Core

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .AccessibilityCompliant(true)
        .Bind("TestReport");
    @viewerRender.RenderHtml()
}

Angular

<dx-report-viewer 
    [reportUrl]="reportUrl" 
    height="800px" 
    [accessibilityCompliant]="true">
    <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
</dx-report-viewer>

React

function App() {

  return (
      <ReportViewer reportUrl="TestReport">
        <RequestOptions host="http://localhost:5000" invokeAction="/DXXRDV" accessibilityCompliant={true}/>
      </ReportViewer>        
  )
}

export default App

Screen Reader Support

The Document Viewer for Web component supports screen readers and complies to WAI-ARIA standards. Exceptions are listed in the Accessibility Standards Compliance topic section.

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.NET Web Forms	ASP.NET MVC	ASP.NET Core
Customize the Document Viewer Color Scheme (ASP.NET WebForms)	Customize the Document Viewer Color Scheme (ASP.NET MVC)	Customize the Document Viewer Color Scheme (ASP.NET Core)

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.