Improve accessibility for screen reader users.

[AlainGravelet]

Hi,
The span method is already much better than a simple image, thank you for that.
But we could do much more better.
This idea will work if the PDF file is already accessible, I mean tagged with semantic tags: H1, H2, P, UL/LI, buttons...
In that case, replacing the span by the correct semantic tags will allow blind end-users to navigate easily into the document alternate, which can be very complicated, especially when documents have multiple pages.
Thank you.

[wojtekmaj]

Do you have a sample PDF that has such properties? I'll have a look on what PDF.js offers. Although I don't recall being provided with suggested tag name.

Also would be great to check if text layer contains these elements when this PDF is opened with Firefox. If not, then probably it's not possible at the moment. If yes, however...

[AlainGravelet]

Hi Wojtek, Here a full accessible PDF document you can use for your tests. If you can't do anything to improve the system, please update me with details (which file in React is involved, why...) and I will try to contact the React team. Thank you a lot for your time. Alain *__________________________________________________________________________* *Alain Gravelet* 122, rue Saint-Philippe Montréal - QC - H4C 2T7 Canada Cellulaire : +1 (514) 561-5900 www.gravelet.net <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> Garanti sans virus. www.avast.com <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> <#m_1039261954527672469_DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2> Le mer. 18 août 2021 à 15:37, Wojciech Maj ***@***.***> a écrit :

Do you have a sample PDF that has such properties? I'll have a look on what PDF.js offers. Although I don't recall being provided with suggested tag name. Also would be great to check if text layer contains these elements when this PDF is opened with Firefox. If not, then probably it's not possible at the moment. If yes, however... — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#831 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AVIGN5LMRGTQHEW3CYMPXF3T5QDWVANCNFSM5CMQZ4AA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

<https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> Garanti sans virus. www.avast.com <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2>

[MattL75]

Hello again @wojtekmaj :) I took a look at PDF.js and it seems there is an optional parameter that can be passed to getTextContent as such: getTextContent({includeMarkedContent: true}) which offers limited support for tagged PDFs. It's combined with some struct tree which renders elements within the canvas and relates them together using an aria-owns.

I tested this on the PDF.js viewer demo and it does seem to render some more accessible structure in a separate layer. It is still spans but it adds some roles and other attributes to help out screenreaders. It's definitely not perfect, but it would be nice to have as an option.

I will probably be implementing (or at least investigating) this in our internal react-pdf fork so I will update this ticket if I have interesting results.

Relevant links:
mozilla/pdf.js#13171 (comment)
mozilla/pdf.js#6269

Tagged document from WCAG:
cooking.pdf

[MattL75]

After doing a small (and ugly) internal PoC, this is definitely possible.

The key parts in the PDF.js PR linked in my above comment are src/display/text_layer.js in the _processItems function and web/pdf_page_view.js for everything struct tree related.

PDF.js viewer renders a structure as follows:

<canvas>
  <span role="heading" aria-level="1" aria_owns="heading_id"></span>
  <span aria_owns="some_paragraph"></span>
</canvas>

In the text layer:
<span id="heading_id">Some Heading</span>
<span id="some_paragaph">Hello world!</span>

I'm not 100% sure why they went in this direction as opposed to rendering the actual tags in the text layer since they are accessible through getTextContent({includeMarkedContent: true}), but I do see that sometimes tags need to be grouped under a parent so that might be why.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.