TongoRender — HTML to PDF, Image & Screenshot API for Developers

Accessibility is not just a nice-to-have — it is a legal requirement for many organizations. The Americans with Disabilities Act (ADA), Section 508, and the European Accessibility Act all mandate that digital documents be accessible to people with disabilities. If your application generates PDFs, those PDFs need to be usable by screen readers, navigable by keyboard, and readable by assistive technologies.

Why PDF Accessibility Matters

Legal compliance — Government agencies, educational institutions, and companies serving the public must provide accessible documents. Lawsuits related to inaccessible PDFs have increased significantly.
Broader reach — Approximately 15% of the world population has some form of disability. Accessible PDFs serve everyone.
Better SEO — Tagged, well-structured PDFs are easier for search engines to index.
Professional quality — Accessibility best practices also improve the overall quality and usability of your documents.

What Makes a PDF Accessible?

An accessible PDF has several key properties:

1. Document Structure Tags

Tagged PDFs contain a logical structure tree that maps visual elements to semantic roles: headings, paragraphs, lists, tables, and figures. Screen readers rely on these tags to present content in a meaningful order.

When generating PDFs from HTML, start with semantic HTML:

<!-- Good: Semantic HTML generates proper tags -->
<h1>Annual Report 2026</h1>
<h2>Financial Summary</h2>
<p>Revenue increased by 23% year-over-year...</p>
<table>
  <caption>Quarterly Revenue Breakdown</caption>
  <thead>
    <tr><th scope="col">Quarter</th><th scope="col">Revenue</th></tr>
  </thead>
  <tbody>
    <tr><td>Q1</td><td>$2.4M</td></tr>
  </tbody>
</table>

<!-- Bad: Divs and spans with no semantic meaning -->
<div class="big-text">Annual Report 2026</div>
<div class="section-header">Financial Summary</div>
<div>Revenue increased by 23%...</div>

2. Alternative Text for Images

Every meaningful image must have descriptive alt text. Decorative images should have empty alt="" attributes:

<!-- Meaningful image -->
<img src="revenue-chart.png" alt="Bar chart showing quarterly revenue growth from $1.8M in Q1 to $3.1M in Q4 2026">

<!-- Decorative image -->
<img src="decorative-line.png" alt="" role="presentation">

3. Reading Order

The reading order must follow a logical sequence. When using CSS layouts (Grid, Flexbox), the visual order might differ from the DOM order. Always ensure the HTML source order matches the intended reading sequence:

<!-- Correct: source order matches reading order -->
<header>Report Title</header>
<nav>Table of Contents</nav>
<main>
  <section>Chapter 1...</section>
  <section>Chapter 2...</section>
</main>
<footer>Page numbers</footer>

4. Table Headers

Data tables must use <th> elements with scope attributes so screen readers can associate data cells with their headers:

<table>
  <thead>
    <tr>
      <th scope="col">Employee</th>
      <th scope="col">Department</th>
      <th scope="col">Hours</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Jane Smith</td><td>Engineering</td><td>160</td></tr>
  </tbody>
</table>

5. Color Contrast

Text must have sufficient contrast against its background. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text:

<style>
  /* Good contrast */
  .content { color: #1a1a2e; background: #ffffff; } /* Ratio: 16.75:1 */
  .highlight { color: #ffffff; background: #0f3460; } /* Ratio: 12.63:1 */

  /* Bad contrast — fails WCAG */
  .light-text { color: #cccccc; background: #ffffff; } /* Ratio: 1.6:1 */
</style>

6. Language Declaration

Declare the document language so screen readers use the correct pronunciation:

<html lang="en">
  <!-- For multi-language content, use lang on specific elements -->
  <p>The French term <span lang="fr">mise en place</span> means...</p>
</html>

Generating Accessible PDFs with TongoRender

When you send well-structured HTML to TongoRender, the Chromium rendering engine preserves the semantic structure in the generated PDF. Here is a checklist for accessible PDF generation:

Use semantic HTML elements: h1-h6, p, ul/ol, table, figure, figcaption
Add alt attributes to all img elements
Use th with scope for table headers
Set lang on the html element
Ensure sufficient color contrast (4.5:1 minimum)
Avoid conveying information through color alone
Use meaningful link text (not "click here")
Add title to the document head

Testing PDF Accessibility

After generating your PDF, validate it with these tools:

Adobe Acrobat Accessibility Checker — Built into Acrobat Pro, it checks for tagged content, reading order, and alt text.
PAC (PDF Accessibility Checker) — A free tool that validates against PDF/UA standards.
Screen readers — Test with NVDA (Windows), VoiceOver (Mac), or JAWS to experience the PDF as a visually impaired user would.

Accessibility is an ongoing practice, not a one-time task. By building accessible HTML templates from the start, every PDF your application generates will be inclusive and compliant.

Generate accessible PDFs with TongoRender — 100 free renders per month, no credit card required.