Document Viewer (ASP.NET WEB Forms and MVC, ASP.NET Core) - Accessibility

• Jul 19, 2024
• 5 minutes to read

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.

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
• Tab Panel
• Document page
• Tabs in the Tab Panel: Parameters, Export Options, Search, Document Map

The user can access UI elements with the Tab key, use arrow keys to navigate element contents, and trigger actions with a keyboard.

A user can use the following keys to interact with the Document Viewer component:

Key	Action
Tab	Navigates between the Ribbon control, Document area, breadcrumbs in drill-through reports, and Tab Panel. Navigates between the Parameters, Search, Document Map, and Export buttons in the Tab panel. Navigates between editors in the Parameters and Search panels.
Arrow keys	Moves between Ribbon command items. Navigates within the contents of a document page when you move the focus to a document page. Moves between editors in the Document Map and Export panels. Selects an item in drop-down boxes.
Enter	Switches to Document Read mode when focus is on a document page. Expands or collapses a panel when a button is selected in the Tab panel.
Esc	Exits Document Read mode. When a document page is selected, press Esc to switch to the Ribbon.
Space	Triggers an action when a command item is selected in the Ribbon.

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

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.

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)

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
Set the ASPxWebDocumentViewer.AccessibilityCompliant property to true	Call the WebDocumentViewerBuilder.AccessibilityCompliant method with the true parameter.

The following code snippet enables accessibility mode, applies the Contrast theme, and sets the root font size to 20px (equivalent to 125% zoom).

ASP.NET Web Forms

<style>
    html {
        font-size: 20px;
    }
</style>
<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server"
    AccessibilityCompliant="true" ColorScheme="contrast">
</dx:ASPxWebDocumentViewer>

ASP.NET MVC

<style>
    html {
        font-size: 20px;
    }
</style>
@Html.DevExpress().GetStyleSheets(
    ASPxWebClientUIControl.ColorSchemeContrast,
    new StyleSheet { ExtensionSuite = ExtensionSuite.Report }
)
@Html.DevExpress().WebDocumentViewer(settings =>
{
    settings.Name = "WebDocumentViewer1";
    settings.AccessibilityCompliant = true;
}).Bind("TestReport").GetHtml()

ASP.NET Core

<style>
    html {
        font-size: 20px;
    }
</style>

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

@section Scripts {
    <link href="~/css/dx-reporting-skeleton-screen.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/viewer.part.bundle.css" />
    @* The dx-analytics.contrast.css stylesheet is located at the  
        node_modules/@devexpress/analytics-core/dist/css folder.
        You can use Libman to copy the css file 
        to the wwwroot/css folder automatically. *@
    <link rel="stylesheet" href="~/css/dx-analytics.contrast.css" />
    <script src="~/js/reporting.thirdparty.bundle.js"></script>
    <script src="~/js/viewer.part.bundle.js"></script>

    @viewerRender.RenderScripts()
}

When a document page is selected, users can press Enter to activate Document Read mode. In this mode, users can navigate page elements and use the screen reader to vocalize element content. You can also specify custom text that the screen reader can vocalize instead of an element’s default content. Refer to the AccessibleDescription topic for more details.