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.

Webviewer(
 {
   initialDoc: hashFile,
   path: "/lib",
   initialDoc: "/samples/files/cheetahs.pdf",
   accessibleMode: true, // Enable accessible mode
 },
 document.getElementById("viewer")
).then((instance) => {
 // ...
});

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

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.

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

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.