|
| 1 | +# Accessibility |
| 2 | + |
| 3 | +`pdfjs-viewer-element` displays the bundled PDF.js viewer in an iframe. The |
| 4 | +host application remains responsible for providing an accessible context for |
| 5 | +the viewer and for supplying accessible PDF documents. |
| 6 | + |
| 7 | +## Name the Viewer |
| 8 | + |
| 9 | +Give every viewer instance a descriptive `iframe-title`. The title is exposed |
| 10 | +to assistive technologies as the name of the embedded viewer. The component |
| 11 | +uses `PDF viewer window` when no title is supplied, but a title that describes |
| 12 | +the document or task is more useful. |
| 13 | + |
| 14 | +```html |
| 15 | +<pdfjs-viewer-element |
| 16 | + src="/reports/annual-report.pdf" |
| 17 | + iframe-title="Annual report 2026 PDF viewer" |
| 18 | + style="height: 100dvh"> |
| 19 | +</pdfjs-viewer-element> |
| 20 | +``` |
| 21 | + |
| 22 | +The `iframe-title` attribute can be updated at runtime. |
| 23 | + |
| 24 | +## Integrate Accessibly |
| 25 | + |
| 26 | +- Give the element an explicit height so that its controls and document content |
| 27 | + remain usable. |
| 28 | +- Provide a visible, programmatic label or heading in the surrounding page |
| 29 | + that explains the document and viewer's purpose. |
| 30 | +- Ensure the viewer is reachable through the page's normal keyboard focus |
| 31 | + order. Test keyboard navigation in the context of the host application. |
| 32 | +- Use the `locale` attribute when the viewer interface should match the |
| 33 | + application's language. |
| 34 | +- If custom CSS is added with `injectViewerStyles`, preserve visible focus |
| 35 | + indicators, sufficient color contrast, and readable text. |
| 36 | + |
| 37 | +## PDF Document Accessibility |
| 38 | + |
| 39 | +Viewer accessibility cannot repair an inaccessible PDF. Authors should provide |
| 40 | +documents with semantic structure, meaningful text alternatives, an appropriate |
| 41 | +reading order, document language metadata, and sufficient contrast. Test the |
| 42 | +complete experience with the assistive technologies and browsers used by the |
| 43 | +application's audience. |
| 44 | + |
| 45 | +## Scope |
| 46 | + |
| 47 | +The viewer interface is provided by the bundled PDF.js version. This project |
| 48 | +does not claim conformance with a specific accessibility standard for every |
| 49 | +host application, PDF document, browser, or assistive technology combination. |
| 50 | + |
| 51 | +To report an accessibility problem in the component, open an issue with the |
| 52 | +browser, operating system, assistive technology (if applicable), component |
| 53 | +version, PDF sample or reproducible steps, expected behavior, and actual |
| 54 | +behavior. Do not include sensitive documents in a public issue. |
0 commit comments