Section:

Accessibility

Ensuring that web applications follow accessibility best practices ensures that everyone can use your product, including those with motor, visual, or other impairments.

WebViewer 7.0 introduced accessibility features to allow users to navigate through the user interface using keyboard navigation, screen readers, and other accessibility tools. Most of these features are permanently enabled to improve the accessibility of the application. However, by setting accessibleMode to true in your WebViewer constructor options, you can add some additional accessibility features.

JavaScript

1Webviewer(
2 {
3   initialDoc: hashFile,
4   path: "/lib",
5   initialDoc: "/samples/files/cheetahs.pdf",
6   accessibleMode: true, // Enable accessible mode
7 },
8 document.getElementById("viewer")
9).then((instance) => {
10 // ...
11});

Enabling accessible mode will cause two main changes to the user interface.

Page content accessible by screen reader

Each PDF page will be focusable, and text content will be extracted from the document and inserted into the DOM. This allows screen readers to read out the text content of each page.

Skip to section tab modal

There will be a “Skip To” section that appears when the user begins tabbing through the page content

Apryse Docs Image

Reader mode

WebViewer also provides a reader mode which displays the text in a reflowable layout and the text size can be increased or decreased. Check out the reader mode guide to learn more.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales