Accessibility in Syncfusion PDF Viewer components

14 Mar 202416 minutes to read

The PDF Viewer component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the PDF Viewer component is outlined below.

Accessibility Criteria Compatibility
WCAG 2.2 Support Yes
Section 508 Support Yes
Screen Reader Support Yes
Right-To-Left Support Yes
Color Contrast Yes
Mobile Device Support Intermediate
Keyboard Navigation Support Yes
Accessibility Checker Validation Yes
Axe-core Accessibility Validation Yes
Yes - All features of the component meet the requirement.
Intermediate - Some features of the component do not meet the requirement.
No - The component does not meet the requirement.

WAI-ARIA attributes

WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript,and related technologies. ARIA 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 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 followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Message 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(or) 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 our PDF Viewer includes keyboard shortcuts for various functions like scrolling, zooming, text search, printing, and annotation deletion.

To enhance user experience, we’re adding additional keyboard shortcuts for actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements like outlines, annotations, bookmarks, and thumbnails.

To support this, we’re introducing a new class called commandManager, which handles custom commands triggered by specific key gestures. These custom commands will be defined by users and executed accordingly.

The commandManager will have a parameter called Commands, which will hold the collection of custom keyboard commands specified by users. Each custom command will be represented by a KeyboardCommand class, containing the command name and associated keyboard combination.

Additionally, we’re introducing the keyboardCustomCommands parameter for the CommandManager, which will utilize the EventCallback to handle keyboard events and trigger appropriate methods when specific key combinations are pressed.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="/styles/styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
    <script src="system.config.js" type="text/javascript"></script>
</head>

<body>
    <!--Element which will render as PdfViewer -->
    <div id="PdfViewer"></div>
</body>

</html>
import {
  PdfViewer,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  ThumbnailView,
  BookmarkView,
  TextSelection} from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  ThumbnailView,
  BookmarkView,
  TextSelection);

let pdfviewer: PdfViewer = new PdfViewer({
  documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
  resourceUrl:"https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib"
  });
pdfviewer.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
      }
    },
  ]
};
pdfviewer.appendTo('#PdfViewer');
import {
  PdfViewer,
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  ThumbnailView,
  BookmarkView,
  TextSelection} from '@syncfusion/ej2-pdfviewer';

PdfViewer.Inject(
  Toolbar,
  Magnification,
  Navigation,
  Annotation,
  LinkAnnotation,
  ThumbnailView,
  BookmarkView,
  TextSelection);

let pdfviewer: PdfViewer = new PdfViewer({
documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'});
pdfviewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer';
pdfviewer.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
      }
    },
  ]
};
pdfviewer.appendTo('#PdfViewer');

Each keyboardCommand object consists of a name property, specifying the name of the custom command, and a gesture property, defining the key gesture associated with the command.

For example, the first command named customCopy is associated with the G key and requires both the Shift and Alt modifier keys to be pressed simultaneously.

Additionally, there’s an explanation of the key modifiers used in the gestures:

Ctrl corresponds to the Control key, represented by the value 1.
Alt corresponds to the Alt key, represented by the value 2.
Shift corresponds to the Shift key, represented by the value 4.
Meta corresponds to the Command key on macOS or the Windows key on Windows, represented by the value 8.

This setup allows users to perform custom actions within the PDF viewer by pressing specific key combinations, enhancing the user experience and providing more efficient navigation and interaction options.

Ensuring accessibility

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

The accessibility compliance of the PDF Viewer component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the PDF Viewer component with accessibility tools.

See also