Accessibility in Reporting for Web

• Jul 28, 2023
• 4 minutes to read

The Document Viewer component can be used in accessible applications that meet Section 508 standards and conform to level AA of the Web Content Accessibility Guidelines.

Overview

The component’s accessibility compliance is based on the following key principles:

Proper HTML Semantics

Document Viewer UI elements use the WAI-ARIA specification to add semantics to page markup. ARIA attributes give the screen reader information for vocalization and navigation.

Tip

You can use the NVDA screen reader to test your application.

When the screen reader encounters a UI element, it reads the aria-label tag. ARIA labels for most UI elements are bound to localization strings. You can add a custom localization string to specify a custom label that the screen reader vocalizes.

To load a custom localization string, use satellite assemblies (ASP.NET WEB Forms and MVC) or handle the client-side CustomizeLocalization event. For more information on localization, review the following help topics:

ASP.NET Web Forms	ASP.NET MVC	ASP.NET Core
Localization	Localization	Localize Your ASP.NET Core Reporting Application

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

Keyboard Support

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

The user can access UI elements with the Tab key, use arrow keys to navigate element contents and trigger actions with a keyboard. For more information, review the following help topic: Document Viewer - Keyboard Navigation in Accessibility Mode.

Visual Accessibility

You can change style options (colors, font size and 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 the 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 the accessibility guidelines related to color contrast.

The code snippet that specifies the root font size and applies the Contrast theme is shown in the How to Enable 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	Customize the Document Viewer Color Scheme	Customize the Document Viewer Color Scheme in ASP.NET Core Application

How to Enable 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 code below 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()
}