Accessibility in Syncfusion Vue PDF Viewer components
11 Jun 202421 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.
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 | 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.
<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/24.1.41/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/24.1.41/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://services.syncfusion.com/vue/production/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://services.syncfusion.com/vue/production/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, 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.