Accessibility in Syncfusion Vue PDF Viewer

28 Feb 202621 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 summarized 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.

NOTE

Mobile device support is marked as partial due to platform-level constraints on hover interactions, complex keyboard navigation, and screen reader capabilities that vary by device and browser.

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 an element within the PDF Viewer is expanded or collapsed.
`aria-readonly`	Indicates the read-only state of a PDF Viewer element.
`aria-haspopup`	Indicates the presence of a popup, such as a context menu or submenu.
`aria-label`	Provides a human-readable label for interactive elements in the PDF Viewer.
`aria-labelledby`	Identifies the element(s) that label the PDF Viewer, often referencing the title element.
`aria-describedby`	Identifies the element(s) that describe the PDF Viewer or its controls.
`aria-orientation`	Indicates whether an element is oriented horizontally or vertically.
`aria-valuetext`	Provides a human-readable text alternative for the current value of a range-type element.
`aria-valuemax`	Specifies the maximum value of a range-type element.
`aria-valuemin`	Specifies the minimum value of a range-type element.
`aria-valuenow`	Specifies the current value of a range-type element.
`aria-controls`	Identifies the element(s) controlled by the current element.

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 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`	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.

Composition API (Standalone)
Options API (Standalone)
Composition API (Server-Backed)
Options API (Server-Backed)
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl"
      :commandManager="commandManager">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
import { provide } from 'vue';
import {
  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch
} from '@syncfusion/ej2-vue-pdfviewer';


const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
const resourceUrl = "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib";

provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
  Annotation, ThumbnailView, Print, TextSelection, TextSearch]);

const 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>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" :documentPath="documentPath" :resourceUrl="resourceUrl"
      :commandManager="commandManager">
    </ejs-pdfviewer>
  </div>
</template>

<script>

import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: "App",
  components: {
    "ejs-pdfviewer": PdfViewerComponent
  },
  data() {
    return {
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
      resourceUrl: "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
      Annotation, ThumbnailView, Print, TextSelection, TextSearch]
  },
  methods: {
    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>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
      :commandManager="commandManager">
    </ejs-pdfviewer>
  </div>
</template>

<script setup>
import { provide } from 'vue';
import {
  PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch
} from '@syncfusion/ej2-vue-pdfviewer';

const serviceUrl = "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer";
const documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";

provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
  Annotation, ThumbnailView, Print, TextSelection, TextSearch])

const 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>
<template>
  <div id="app">
    <ejs-pdfviewer id="pdfViewer" :serviceUrl="serviceUrl" :documentPath="documentPath"
      :commandManager="commandManager">
    </ejs-pdfviewer>
  </div>
</template>

<script>
import {
  PdfViewerComponent, Toolbar, Magnification, Navigation,
  LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
  Print, TextSelection, TextSearch
} from '@syncfusion/ej2-vue-pdfviewer';

export default {
  name: "App",
  components: {
    "ejs-pdfviewer": PdfViewerComponent
  },
  data() {
    return {
      serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
      documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
    };
  },
  provide: {
    PdfViewer: [Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
      Annotation, ThumbnailView, Print, TextSelection, TextSearch]
  },

  methods: {
    commandManager: function () {
      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 a name property for the custom command and a gesture property defining the key gesture associated with the command. For example, the customCopy command is associated with the G key and requires both the Shift and Alt modifier

Key modifiers used in gestures:

Ctrl corresponds to the Control key (value 1).
Alt corresponds to the Alt key (value 2).
Shift corresponds to the Shift key (value 4).
Meta corresponds to the Command key on macOS or the Windows key on Windows (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.

Search docs

Ask HelpBot