Syncfusion AI Assistant

How can I help you?

Accessible PDF Viewing with Syncfusion Angular Components

11 Feb 202620 minutes to read

The PDF Viewer component follows accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and WCAG roles 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 follows the keyboard interaction guideline to support users who rely on assistive technologies (AT) or keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer.

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 PDF Viewer includes keyboard shortcuts for scrolling, zooming, text search, printing, and annotation deletion.

Additional keyboard shortcuts are available for common actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements (outlines, annotations, bookmarks, thumbnails).

To support custom key bindings, the viewer provides a commandManager configuration object that handles custom commands triggered by specified key gestures. Custom commands are defined by name and executed when their associated key gesture is detected.

The commandManager configuration includes a keyboardCommand collection that holds user-defined keyboard commands. Each command is represented by a KeyboardCommand object containing a name and an associated gesture describing the key combination.

The keyboardCustomCommands parameter is an event callback invoked when a custom key combination is detected; handlers can perform application-specific actions in response.

import { Component, OnInit } from '@angular/core';
import { LinkAnnotationService, BookmarkViewService, MagnificationService,
         ThumbnailViewService,ToolbarService, NavigationService,
         TextSearchService, AnnotationService, TextSelectionService,
         PrintService
       } from '@syncfusion/ej2-angular-pdfviewer';
@Component({
  selector: 'app-container',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                          [documentPath]='document'
                          [resourceUrl]='resourceUrl'
                          [commandManager]='commandManager'
                          style="height:640px;display:block">
                </ejs-pdfviewer>
            </div>`,
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               AnnotationService, TextSearchService, TextSelectionService,
               PrintService]
  })
  export class AppComponent implements OnInit {
      public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
      public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

    ngOnInit(): void {
    }
    public 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
               }
            },
        ]
    }
  }
import { Component, OnInit } from '@angular/core';
import { LinkAnnotationService, BookmarkViewService, MagnificationService,
         ThumbnailViewService,ToolbarService, NavigationService,
         TextSearchService, AnnotationService, TextSelectionService,
         PrintService
       } from '@syncfusion/ej2-angular-pdfviewer';
@Component({
  selector: 'app-container',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                          [serviceUrl]='service'
                          [documentPath]='document'
                          [commandManager]='commandManager'
                          style="height:640px;display:block">
                </ejs-pdfviewer>
            </div>`,
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               AnnotationService, TextSearchService, TextSelectionService,
               PrintService]
  })
  export class AppComponent implements OnInit {
      public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
      public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

    ngOnInit(): void {
    }
    public 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
               }
            },
        ]
    }
  }

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 enables custom actions within the PDF Viewer when specific key combinations are pressed, 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.

See also