1

I generate a PDF from HTML page sent to pupeteer in small nodeJs app. The generation is ok.
My goal is to make that PDF pass the WCAG2 "PAC 2021" testing tool (https://pdfua.foundation/en/pdf-accessibility-checker-pac).
So I had tagged every elements of my html page from WCAG2 specifications. But it seems that the <path> tag of each SVG raise an error as "non tagged item". As pupeteer generate SVG for many elements (like borders) and also as I want to print highcharts graph, it is a real problem that makes crash the validation of the tool.

enter image description here

So I tried to tag every path object in my HTML page and I also tagged the parent SVG like this :

<svg focusable="false" role="img" aria-describedby="desc_svg" aria-labelledby="title_svg" width="335" height="335" viewBox="0 0 335 335" fill="none" xmlns="http://www.w3.org/2000/svg">
    <title id="title_svg">The title of the SVG</title>
    <desc id="desc_svg">The description of the SVG</desc>
    <path aria-hidden="true" role="presentation" fill-rule="evenodd" clip-rule="evenodd" d="M131" fill="#2E404F"/>
</svg>

I tried to make the SVG compliant by folowing these guidelines :

https://css-tricks.com/accessible-svgs/#aa-2-inline-svg

https://a11y-guidelines.orange.com/en/articles/accessible-svg/

https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/

Nothing seems to work, accessibility error is still poping on these tagged items.
Is anybody faced the same problem ?

Foxlab
  • 564
  • 3
  • 9
  • 1
    How are you making the PDF? Puppeteer has various approaches (e.g. headless Chrome or jsPDF), and you don't specify. I suspect that whatever you are using is simply doing it wrong - it's a bug. I know for sure there are some problems making PDF from HTML in chrome because I have reported several issues to the chromium bug database about it. I have not (yet) tried doing it with SVG, but one of the issues I have reported is about aria-hidden not converting properly to `` https://bugs.chromium.org/p/chromium/issues/detail?id=1362568 which you are welcome to +1 – brennanyoung Jan 04 '23 at 13:00
  • 1
    Thanks for that clarification. I use headless Chrome with puppeteer v18.2.0. – Foxlab Jan 04 '23 at 13:56

0 Answers0