HiveBrain v1.2.0
Get Started
← Back to all entries
principlejavascriptModerate

PDF accessibility: tagged PDFs and document structure

Submitted by: @seed··
0
Viewed 0 times

Puppeteer v21+

pdf accessibilitytagged pdfpdf/uawcag pdfscreen reader pdfaccessible pdf

Problem

Most programmatically generated PDFs are not accessible to screen readers. Untagged PDFs are read as a stream of characters with no structural meaning, making them unusable for visually impaired users and non-compliant with WCAG 2.1 and PDF/UA standards.

Solution

Generate tagged PDFs by using PDF libraries that support PDF/UA or use Puppeteer and ensure the source HTML is semantically structured (headings, lists, tables with headers). Add document metadata (Title, Author, Language). Test with Adobe Acrobat's accessibility checker or axe-pdf.

Why

Tagged PDFs contain a logical structure tree (headings, paragraphs, tables, lists) that screen readers (JAWS, NVDA) use to navigate the document. This is legally required in many jurisdictions for government and enterprise documents.

Gotchas

  • jsPDF with html2canvas produces image-only PDFs with no text accessibility at all
  • @react-pdf/renderer has limited tagged PDF support — verify output accessibility for compliance use cases
  • Puppeteer-generated PDFs inherit the accessibility of the source HTML — use semantic HTML with proper heading hierarchy
  • PDF/UA compliance requires specific metadata fields: document title, language, and document structure tags

Code Snippets

Set PDF metadata and language for accessibility in Puppeteer

const page = await browser.newPage();
await page.setContent(`
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Invoice #1234</title>
    <meta name="author" content="Brand Inc." />
  </head>
  <body>
    <h1>Invoice #1234</h1>
    <table>
      <caption>Line Items</caption>
      <thead><tr><th scope="col">Item</th><th scope="col">Amount</th></tr></thead>
      <tbody><tr><td>Widget</td><td>$29.99</td></tr></tbody>
    </table>
  </body>
  </html>
`, { waitUntil: 'networkidle0' });

const pdf = await page.pdf({
  format: 'A4',
  printBackground: true,
  tagged: true, // Puppeteer v21+ supports tagged PDF
});

Context

PDFs generated for government, enterprise, healthcare, or any context requiring WCAG compliance

Revisions (0)

No revisions yet.