> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/advanced/accessibility.md). # Accessibility for the WebViewer JavaScript PDF Viewer Enhance user experience with accessibility features with WebViewer. Enable keyboard navigation, screen readers, and more for all users, including those with impairments. Learn how to optimize accessib Ensuring that web applications follow accessibility best practices ensures that everyone can use your product, including those with motor, visual, or other impairments. **WebViewer 11.6 raised the standard for accessibility features, achieving WCAG 2.2AA** **compliance** for the UI which ensures the application meets globally recognized standards for accessibility. This compliance guarantees that individuals with disabilities can effectively perceive, navigate, and interact with the application. The accessibility features in WebViewer enable seamless navigation through the user interface using keyboard navigation, screen readers, and other assistive tools. Most of these features are permanently enabled to improve the overall accessibility of the application. Additionally, by setting `accessibleMode` to true in your WebViewer constructor options, you can activate extra accessibility features. {% tabs %} {% tab title="JavaScript" %} {% code lineNumbers="true" %} ```js Webviewer( { initialDoc: hashFile, path: "/lib", initialDoc: "/samples/files/cheetahs.pdf", accessibleMode: true, // Enable accessible mode }, document.getElementById("viewer") ).then((instance) => { // ... }); ``` {% endcode %} {% endtab %} {% endtabs %} Enabling accessible mode will cause two main changes to the user interface. ## Accessible Mode UI changes ### Skip to section tab modal There will be a “Skip To” section that appears when the user begins tabbing through the page content: ![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-36ee9b9ff8aa14686cba045c33a8b2c8bd3d0af1%2F9058b61d8e4c433bd5a8ba5652fbaaff2bec218a-546x268.gif?alt=media) Selecting the 'Document' option in the 'Skip To' menu and pressing the `Enter` key moves the focus to the current page of the file. If a screen reader is active, users can navigate through the document's content using standard navigation keys. ### Page content accessible by screen reader Each PDF page will be focusable, with the file content extracted from the document and inserted into the DOM. For PDF files, the application activates the accessible reading order mode, which enables screen readers to navigate and read each piece of content—such as paragraphs or image descriptions—individually as users navigate using arrow keys. This mode ensures an optimized reading experience but may be disabled when certain actions are performed or specific features are enabled. For XOD files, the screen reader processes the content of each page as a whole, reading it out in its entirety. Users can navigate between pages to hear the content sequentially. Details about the accessible reading order mode and its behavior will be explained in the next section. ## Accessible Reading Order The **Accessible Reading Order Mode** is a feature designed specifically for [**tagged PDF files**](/core/accessibility/convert.md#about-pdf-ua) to enhance accessibility for screen readers. This mode works only for PDFs that are correctly tagged with semantic information about the document's structure. Tags define the logical reading order and content hierarchy, including elements such as headings, paragraphs, lists, tables, and images. If tags are missing or improperly structured, the reading order may not align with the visual layout, potentially leading to accessibility challenges. When Accessible Reading Order Mode is enabled, it builds and inserts the document structure into the DOM based on the file's tags, allowing screen readers to interpret and navigate the content effectively. For untagged PDFs, the document structure will not be added to the DOM. In such cases, screen readers will treat the PDF similarly to XOD files, reading the content of each page as a whole. While users can navigate between pages, detailed navigation within a single page is not supported. ### Incompatible actions, modes, and features **Accessible Reading Order Mode** will automatically end when actions or modes that alter the document's structure are executed or enabled. These changes can disrupt the accessibility features provided by the mode. The specific actions, modes, and features that terminate the Accessible Reading Order Mode are: * Multiviewer and Compare Pages Modes * Content Edit Mode * Form Builder Mode * Apply a Redaction * Add a Portfolio * Cropping pages * [MultipleViewerMerging](/web/page-manipulation/thumbnails-controls.md#merging-from-another-webviewer) * [ThumbnailMerging](/web/page-manipulation/thumbnails-controls.md#merging-documents) * [ThumbnailReordering](/web/page-manipulation/thumbnails-controls.md#reordering-pages) * Outline Editing * Page manipulation ### Improving Performance with Pre-Rendering {% hint style="warning" %} **Please Note!** Starting with WebViewer 11.7, **Accessible Reading Order Mode** has been significantly optimized for improved speed and performance. As part of these enhancements, it no longer depends on a pre-processing level. Consequently, the `setPreProcessingLevel` and `getPreProcessingLevel` functions have been deprecated. To control rendering performance across the document, you can use [Core.setPrerenderLevel](https://sdk.apryse.com/api/web/8.1/Core.html#.SetPreRenderLevel__anchor), which allows you to adjust how many pages are rendered ahead of time. {% endhint %} To enhance the performance of the **Accessible Reading Order Mode**, particularly when working with larger PDF files, you can use the `setPreProcessingLevel` API. This API allows you to specify the number of pages to pre-render in advance, improving navigation smoothness. #### How `setPreProcessingLevel` Works The `setPreProcessingLevel` API accepts a number indicating how many pages of the document should be pre-rendered. By pre-rendering these pages, the document structure for those pages is built and inserted into the DOM to ensure they are available for reading. If pages aren't pre-rendered, users could run into situations where they need to wait for pages to load if they navigate to a page before it is available. #### Setting the Pre-Processing Level * **Higher Pre-Processing Level**: Specifies that more pages will be pre-rendered in advance. This improves navigation smoothness for the pre-rendered pages but increases the initial document loading time, particularly for larger files. * **Lower Pre-Processing Level**: Specifies fewer pages to pre-render, resulting in faster initial loading times. However, navigating quickly to pages beyond the pre-rendered range may introduce additional loading time. {% tabs %} {% tab title="JavaScript" %} {% code lineNumbers="true" %} ```js // Set the pre-processing level to pre-render the first 10 pages const AccessibleReadingOrderManager = instance.Core.documentViewer.getAccessibleReadingOrderManager() AccessibleReadingOrderManager.setPreProcessingLevel(10); ``` {% endcode %} {% endtab %} {% endtabs %} ## Reader mode WebViewer also provides a [reader mode](/web/advanced/reader-mode.md) which displays the text in a reflowable layout and the text size can be increased or decreased. Check out the [reader mode guide](/web/advanced/reader-mode.md) to learn more. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.apryse.com/web/advanced/accessibility.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.