Accessibility in ASP.NET Core PDF Viewer component

28 Feb 202617 minutes to read

The PDF Viewer component adheres to accessibility guidelines and standards, including ADA, Section 508, and WCAG 2.2. It implements WCAG roles to ensure comprehensive accessibility support for all users.

Accessibility compliance

Below is an outline of the accessibility compliance for the PDF Viewer component:

Accessibility Criteria	Compatibility
WCAG 2.2 Support
Section 508 Support
Screen Reader Support
Right-To-Left Support
Color Contrast
Mobile Device Support
Keyboard Navigation Support
Accessibility Checker Validation
Axe-core Accessibility Validation

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) defines a way to make web content and web applications more accessible. It provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the PDF Viewer component:

Attributes	Purpose
`aria-disabled`	Indicates whether the PDF Viewer component is in a disabled state.
`aria-expanded`	Indicates whether the suggestion list has expanded.
`aria-readonly`	Indicates the read-only state of the PDF Viewer element.
`aria-haspopup`	Indicates whether the PDF Viewer input element has a suggestion list.
`aria-label`	Provides a label for the breadcrumb item.
`aria-labelledby`	Provides a label for the PDF Viewer, typically pointing to the ID of the element used as the viewer’s title.
`aria-describedby`	This attribute points to an element describing the PDF Viewer component.
`aria-orientation`	Indicates whether the PDF Viewer element is oriented horizontally or vertically.
`aria-valuetext`	Returns the current text value of the PDF Viewer.
`aria-valuemax`	Indicates the maximum value of the PDF Viewer.
`aria-valuemin`	Indicates the minimum value of the PDF Viewer.
`aria-valuenow`	Indicates the current value of the PDF Viewer.
`aria-controls`	Attribute set on a button, pointing to its corresponding content.

Keyboard interaction

The PDF Viewer component follows the keyboard interaction guidelines, making it accessible for users of assistive technologies and those who rely solely on keyboard navigation. The built-in keyboard shortcuts support common operations such as document navigation, zooming, searching, text selection, and annotation management.

Built-in keyboard shortcuts

Press (Windows)	Press (Macintosh)	To do this
		Shortcuts for page navigation
`CONTROL + Left Arrow (or) CONTROL + Up Arrow`	`COMMAND + Left Arrow (or) COMMAND + Up Arrow`	Navigate to the first page
`CONTROL + Right Arrow (or) CONTROL + Down Arrow`	`COMMAND + Right Arrow (or) COMMAND + Down Arrow`	Navigate to the last page
`Left Arrow`	`Left Arrow (or) Shift + Space`	Navigate to the previous page
`Right Arrow`	`Right Arrow (or) Space`	Navigate to the next page
`CONTROL + G`	`COMMAND + G`	Go to a specific page
`Up Arrow`	`Up Arrow`	Scroll up
`Down Arrow`	`Down Arrow`	Scroll down
		Shortcuts for zooming
`CONTROL + =`	`COMMAND + =`	Perform zoom-in operation
`CONTROL + -`	`COMMAND + -`	Perform zoom-out operation
`CONTROL + 0`	`COMMAND + 0`	Reset zoom level to 100%
		Shortcut for text search
`CONTROL + F`	`COMMAND + F`	Open the search toolbar
		Shortcut for text selection
`CONTROL + C`	`CONTROL + C`	Copy selected text, annotation, or form field
`CONTROL + X`	`CONTROL + X`	Cut selected text, annotation, or form field
`CONTROL + V`	`COMMAND + V`	Paste selected text, annotation, or form field
		Shortcuts for general operations
`CONTROL + Z`	`COMMAND + Z`	Undo the action
`CONTROL + Y`	`COMMAND + Y`	Redo the action
`CONTROL + P`	`COMMAND + P`	Print the document
`Delete`	`Delete`	Delete selected annotations and form fields
`CONTROL + Shift + A`	`COMMAND + Shift + A`	Toggle Annotation Toolbar
`CONTROL + Alt + 0`	`COMMAND + Option + 0`	Show Command panel
`CONTROL + Alt + 2`	`COMMAND + Option + 2`	Show Bookmarks
`CONTROL + Alt + 1`	`COMMAND + Option + 1`	Show Thumbnails
`CONTROL + S`	`COMMAND + S`	Download the document
`Shift + H`	`Shift + H`	Enable pan mode
`Shift + V`	`Shift + V`	Enable text selection mode

Custom keyboard commands

In addition to the built-in keyboard shortcuts, the PDF Viewer component supports custom keyboard commands, allowing developers to define application-specific keyboard gestures and actions. This feature enhances user experience by enabling efficient navigation and interaction tailored to specific workflows.

Configuring custom keyboard commands

Custom keyboard commands are configured through the CommandManager class, which manages keyboard events and executes defined commands. The CommandManager accepts a collection of custom keyboard commands via the keyboardCommand parameter, where each command specifies a unique name and its associated keyboard gesture.

Each keyboard gesture consists of two components:

Key: The primary key (represented using the PdfKeys enum)
Modifier keys: Optional modifier keys (Shift, Ctrl, Alt, or Meta combinations)

Modifier keys reference

The following modifier keys can be combined with primary keys:

Ctrl (Control key): represented by the value 1
Alt (Alt key): represented by the value 2
Shift (Shift key): represented by the value 4
Meta (Command key on macOS or Windows key on Windows): represented by the value 8

Multiple modifiers can be combined using the bitwise OR operator (|).

Example: Defining custom keyboard commands

Standalone
Server-Backed
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   commandManager="commandManager">
    </ejs-pdfviewer>
</div>

<script type="text/javascript">

    function commandManager() {
       keyboardCommand: [{
            name: 'customCopy',
            gesture: {
                pdfKeys: PdfKeys.G,
                modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
               }
            },
            {
            name: 'customPaste',
            gesture: {
                pdfKeys: PdfKeys.H,
                modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
               }
            },
            {
            name: 'customCut',
            gesture: {
                pdfKeys: PdfKeys.Z,
                modifierKeys: ModifierKeys.Control
               }
            },
            {
            name: 'customSelectAll',
            gesture: {
                pdfKeys: PdfKeys.E,
                modifierKeys: ModifierKeys.Control
               }
            },
        ]
    }
</script>
<div style="width:100%;height:600px">
    <ejs-pdfviewer id="pdfviewer"
                   serviceUrl='/Index'
                   documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                   commandManager="commandManager">
    </ejs-pdfviewer>
</div>

<script type="text/javascript">
    function commandManager() {
       keyboardCommand: [{
            name: 'customCopy',
            gesture: {
                pdfKeys: PdfKeys.G,
                modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
               }
            },
            {
            name: 'customPaste',
            gesture: {
                pdfKeys: PdfKeys.H,
                modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
               }
            },
            {
            name: 'customCut',
            gesture: {
                pdfKeys: PdfKeys.Z,
                modifierKeys: ModifierKeys.Control
               }
            },
            {
            name: 'customSelectAll',
            gesture: {
                pdfKeys: PdfKeys.E,
                modifierKeys: ModifierKeys.Control
               }
            },
        ]
    }
</script>

Each keyboardCommand object consists of the following properties:

name: The identifier for the custom command (e.g., customCopy, customPaste)
gesture: An object containing the key binding configuration:
- pdfKeys: The primary key from the PdfKeys enum
- modifierKeys: A combination of modifier keys using the ModifierKeys enum with bitwise OR operations

In the example above, the customCopy command is triggered by pressing G in combination with Shift and Alt keys. The gesture definition allows multiple modifier keys to be combined, enabling flexible keyboard accessibility patterns.

Ensuring accessibility

The PDF Viewer component’s accessibility compliance is validated through automated testing using accessibility-checker and axe-core software tools.

NOTE

Follow the steps provided in the link to create a simple PDF Viewer sample.

Search docs

Ask HelpBot