Accessibility for Web Document Viewer

• Jul 03, 2025
• 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):

Download: Web Document Viewer ACR (Aug 2024)

Accessibility Features Overview

- 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.

The following code snippet enables accessibility mode :

• ASP.NET Web Forms
• ASP.NET MVC
• ASP.NET Core
• Angular
• React

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

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

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

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

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 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:

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.

YouTube video

Toolbar

Document Page

Tab Panel

Preview Parameters Tab

Export Options Tab

Search Tab

Document Map 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.