htmltopdf.online

Accessible PDFs from HTML: tags, title, language and alt text

What the PDF’s tag tree contains for each HTML element, tested, and how to write HTML that reads well with a screen reader.

Updated · 5 min read

An accessible PDF carries a hidden structure, called tags, that tells screen readers what is a heading, a list or a table, and in what order to read things. Every PDF from htmltopdf.online is a tagged PDF. How good those tags are depends almost entirely on your HTML.

What becomes what

We converted test pages and read the tag tree inside each PDF:

HTMLPDF tag
<h1> to <h6>H1 to H6 headings
<p>P paragraph
<ol>, <ul>, <li>L list, LI items with Lbl labels
<img alt="…">Figure with the alt text
<table>, <caption>Table with Caption
<th scope="col">TH with a column scope; data cells point to their headers
<a href="…">Link
A <div> styled to look like a headingNo meaning (NonStruct)

The last row matters most. A <div> in bold 20pt looks like a heading but is tagged as nothing, so screen reader users can’t jump to it. Use real heading, list and table elements.

Title and language

  • <title> becomes the PDF title that readers show in the window or tab. Without it, they usually show the file name.
  • <html lang="en-GB"> sets the document language, so screen readers use the right pronunciation. Our test PDF carried “en-GB” exactly.
  • Other meta tags are ignored. author, description and keywords meta tags didn’t fill the PDF’s Author, Subject or Keywords fields.

Reading order follows your HTML

The tag tree follows the order of elements in your source, not where CSS places them. In our test, a paragraph moved to the top with flexbox order: -1 was still read second. Write the HTML in the order it should be read.

A short checklist

  • One <h1>, then headings in order without skipping levels.
  • Alt text on every meaningful image; alt="" on decorative ones.
  • Table headers in <th> with scope, inside <thead>.
  • Link text that makes sense alone (“Download the price list”, not “click here”).
  • Enough colour contrast, and never colour alone to carry meaning.

Tagged isn’t the same as certified

Tags are the foundation, but some organisations require formal standards such as PDF/UA. The converter doesn’t certify that. If you need it, check the PDF with an accessibility checker such as the free PAC tool or Adobe Acrobat’s checker, and fix issues in your HTML.