Webviewer: Document accessibility features for visually impaired

We have to implement accessibility features for visually impaired people with pdfTron webviewer.

Can you please help us.

Thanks,
Dattatray

Hello Dattatry,

WebViewer is ADA (American disability Act) complaint and support a number of accessibility features, you can find out more in the link below
https://groups.google.com/d/msg/pdfnet-webviewer/BeGJMrioUa0/CHqlI4Ce5MYJ

We have a text to speech accessibility sample you can find in the link below that show how you can make an application for the visually impaired.
https://www.pdftron.com/samples/web/samples/advanced/accessibility/
https://www.pdftron.com/samples/web/samples/advanced/accessibility/accessibility.js

Besides that, we have a custom accessibility branch that adds accessibility features to WebViewer. Controls can be navigated through and activated with the keyboard.
https://github.com/PDFTron/webviewer-ui/tree/accessibility
https://readingdemo-6ce08.firebaseapp.com/ (link to a demo)

Use the tab key to navigate through the accessible controls. Shift+tab navigates in the reverse order. Tabbing also works for most sub-menus. Use enter to activate a control. Use ‘esc’ to close a sub-menu.

The first control is the ‘Skip to main content’ button. It will skip all the controls and focus on the viewer’s PDF content. This exists to avoid having to tab through all the controls to access the PDF content. After focusing on this content, you can use the keyboard shortcuts to navigate through the pages.

List content in the left panel can be navigated with the arrow keys. For example, a list of annotations can be traversed using the arrow keys. The arrow keys were chosen so that you are still able to tab out of a list and not get stuck.

We also plan to make more accessibility improvements over the course of the year, any feedback you have on the current status would be appreciate.

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

I am unable to read PDF/XOD documents in PDFTron with the help of Accessibility tools like mac voiceOver. I have tried with the “Tab” key to navigate through the accessible controls to read the document using voiceOver but not succeed. Currently, I am using the PDFTron webviewer in my angular application.

Hello Priyank,

Unfortunately WebViewer currently doesn’t have very good support for navigating the UI using screen readers like Mac VoiceOver. It’s one of the features we are currently working on (you can find the in progress branch at https://github.com/PDFTron/webviewer-ui/tree/a11y-next). We are hoping to finish and release our accessibility updates sometime around summer (we can’t give you a hard release date yet). I passed your feedback to my colleague who is working on the feature, they’ll try to get VoiceOver working for the summer release.

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

Hello Andrew,

Thanks for the update.

As there is no support available on PDFTron for screen readers like Mac VoiceOver, Can we use something native functionality to interact like Window.speechSynthesis in our PDFTron App and if so can you share the code or guideline how to use speechSynthesis in PDFTron application**.**

Reference Link: https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis

Any help, much appreciated!!

Hello Andrew,

Thanks for the update.
As there is no support available on PDFTron for screen readers like Mac VoiceOver, Can we use something native functionality like Window.speechSynthesis in our PDFTron App and if so can you share the code or guideline how to use speechSynthesis in PDFTron application**.**

Reference Link: https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis

Any help, much appreciated!!

Hi Priyank,

Our accessibility sample is using the “Window.speechSynthesis” API, you can find it in the links below
https://www.pdftron.com/samples/web/samples/advanced/accessibility/
https://www.pdftron.com/samples/web/samples/advanced/accessibility/accessibility.js

Feel free to let me know if you have any questions about the code.

Best Regards,

Andrew Yip
Software Developer
PDFTron Systems, Inc.
www.pdftron.com

Hello Andrew,

Thank You for the below links. But I have a query below.

When we are using .pdf file in our code with accessibleMode: true enabled. In inspecting element we are able to get the pageText**.** but when we use the .xod file we are unable to get the pageText with accessibleMode: true. due to which we are unable to read the text.

Kindly suggest how to achieve the same in .xod file also

AccessibleMode_on.png

withPDF_File.jpg

Hello,

Sorry for the late reply, your previous question seem to have gotten lost. We’ve tested "accessibleMode: true" in WebViewer 7.2 with a XOD file and we are able to see the page text in the DOM. Can you try the latest version and see if it’s working for you. Thank you

Best Regards