Accessibility in Syncfusion PDF Viewer components React

25 Feb 202618 minutes to read

The PDF Viewer component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and the WCAG ARIA roles specified by WAI-ARIA. The component’s accessibility compliance is outlined below.

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 (Accessible Rich Internet Applications) provides semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used by the PDF Viewer component.

Attributes	Purpose
`aria-disabled`	Indicates whether the PDF Viewer component is in a disabled state or not.
`aria-expanded`	Indicates whether the suggestion list has expanded or not.
`aria-readonly`	Indicates the readonly state of the PDF Viewer element.
`aria-haspopup`	Indicates whether the PDF Viewer input element has a suggestion list or not.
`aria-label`	Indicates the breadcrumb item text.
`aria-labelledby`	Provides a label for the PDF Viewer. Typically, the “aria-labelledby” attribute will contain the id of the element used as the PDF Viewer’s title.
`aria-describedby`	This attribute points to the PDF Viewer element describing the one it’s set on.
`aria-orientation`	Indicates whether the PDF Viewer element is oriented horizontally or vertically.
`aria-valuetext`	Returns the current text 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 is set to the button and it points to the corresponding content.

Keyboard interaction

The PDF Viewer component follows the keyboard interaction guideline to support users of assistive technologies and users who rely on keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer component.

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 The 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`	Retain the zoom level to 1
		Shortcut for Text Search
`CONTROL + F`	`COMMAND + F`	Open the search toolbar
		Shortcut for Text Selection
`CONTROL + C`	`CONTROL + C`	Copy the selected text or annotation or form field
`CONTROL + X`	`CONTROL + X`	Cut the selected text or annotation of the form field
`CONTROL + Y`	`CONTROL + Y`	Paste the selected text or annotation or form field
		Shortcuts for the general operation
`CONTROL + Z`	`CONTROL + Z`	Undo the action
`CONTROL + Y`	`CONTROL + Y`	Redo the action
`CONTROL + P`	`COMMAND + P`	Print the document
`Delete`	`Delete`	Delete the 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
`Shift + H`	`Shift + H`	Enable pan mode
`Shift + V`	`Shift + V`	Enable text selection mode

The current implementation of the PDF Viewer includes keyboard shortcuts for scrolling, zooming, text search, printing, annotation deletion, and other common actions.

Additional keyboard shortcuts support navigation between pages, direct access to specific pages, toggling annotation tools, and displaying PDF elements such as outlines, annotations, bookmarks, and thumbnails.

To support custom keyboard actions, the implementation includes a commandManager construct that handles commands triggered by specific key gestures. The commandManager exposes a Commands parameter that contains a collection of custom keyboard commands. Each custom command is represented by a KeyboardCommand object containing a name and an associated gesture description.

A keyboardCustomCommands callback is available to handle keyboard events and trigger custom behavior when a defined key combination is detected.

Standalone
Server-Backed
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
       ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
let pdfviewer;

function App() {

  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
          }
        },
      ]
  }
  return (<div>
    <div className='control-section'>
      {/* Render the PDF Viewer */}
        <PdfViewerComponent
          ref={(scope) => { pdfviewer = scope; }}
          id="container"
          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
          resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
          commandManager = {commandManager}
          style={{ 'height': '640px' }}>

                <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
                                    ThumbnailView, Print,TextSelection, TextSearch]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import {PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
       ThumbnailView, Print, TextSelection, Annotation, TextSearch, Inject } from '@syncfusion/ej2-react-pdfviewer';
let pdfviewer;

function App() {
  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
          }
        },
    ]
  }
  return (<div>
    <div className='control-section'>
      {/* Render the PDF Viewer */}
        <PdfViewerComponent
          ref={(scope) => { pdfviewer = scope; }}
          id="container"
          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
          serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
          commandManager = {commandManager}
          style={{ 'height': '640px' }}>

                <Inject services={[ Toolbar, Magnification, Navigation, LinkAnnotation, Annotation, BookmarkView,
                                    ThumbnailView, Print,TextSelection, TextSearch]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Each keyboardCommand object includes a name property that identifies the command and a gesture property that defines the key gesture associated with the command.

For example, a command named customCopy can be associated with the G key together with the Shift and Alt modifiers.

Key modifier encodings used in gesture definitions are as follows:

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

These gesture definitions enable users to invoke custom actions in the PDF Viewer by pressing specified key combinations, improving navigation and interaction efficiency.

Ensuring accessibility

The PDF Viewer component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.

Search docs

Ask HelpBot