Aligning Text for accessibility

When designing for accessibility, especially for screen readers, it’s crucial to create layouts that are both navigable for users with disabilities and easily understood by commonly used screen readers.

In documents such as invoices and policies, it’s common to present information like issue dates, due dates, amounts, other sales info, patient info, etc., in a table-like format. For example, the image below shows patient information on a dentist’s invoice, presented in a tabular format, with the first column containing the labels and the second column displaying the values.

There are various ways to achieve this, including CSS techniques like Flexbox, Grid, and the more traditional display:inline-block, as well as HTML structures like the <table> element. While all of these methods produce similar visual results, they are interpreted differently in PDF/UA output and by screen readers. As a result, some approaches offer a more accessible and user-friendly experience than others.

In this tutorial, we’ll explore an approach using display:inline-block for the layout of this information, with a focus on how screen readers interpret the content when exported to PDF/UA. We’ll also explain why this method is generally more accessible than alternatives like Flexbox, Grid, or <table>, especially when considering proper labelling, semantic structure, and natural reading flow for assistive technologies.

Note: The PDF/UA output and CSS Grid described in this tutorial requires the Early Access version of the new OL Connect Designer. This is a significant upgrade, incorporating the Chromium browser engine, which replaces the older Gecko engine. The upgrade brings the latest HTML, CSS, and JavaScript standards to the software, opening up new possibilities for future UI enhancements and introducing new output options, such as the ability to generate accessible PDF output using PDF/UA (Universal Accessibility). The official release date will be announced later.

An Early Access 60-day free trial version, which generates documents with watermarks, is now available via the Web Activation Manager portal (requires valid OL Care). If you would like to purchase the PDF/UA output option immediately, to remove the watermark limitation, please contact your authorized OL Connect reseller or Customer Success Manager.

Understanding the problem

Modern web design often uses Flexbox, Grid, or table structures to layout the text. These approaches achieve similar visual results, but when exported to PDF/UA they behave differently when interpreted by screen readers

• Flexbox and Grid: are layout models designed for responsive positioning of elements. However, they don’t provide much semantic meaning to screen readers. When applied to elements like paragraphs, screen readers read all content at once in a continuous stream, without recognizing the end of each line.
• Tables: While tables are great for displaying tabular data, such as columns of numbers, they are often used to position text, which can confuse screen readers. Screen readers announce the table structure first (like “row 1, column 1”), which may not be ideal when the content isn’t actually tabular.

Let’s look at a more accessible and semantically appropriate alternative.

Using inline-block

A more accessible and semantically appropriate method, especially for PDF/UA output, is to use display: inline-block for layout. This method mimics the appearance of a table without using <table> tags, and it ensures that screen readers read the content in a logical order and information is processed per line.

HTML structure

We’ll break down the approach using the following example. Each line uses a standard paragraph and represents a single label-value pair, like a row in a table. The label and value are both wrapped in a <span> element, making this easy to style.

<h2>Patient information</h2>
<p class="line">
  <span>Names:</span><span>{{patient.name}}</span>
</p>
<p class="line">
  <span>Date of birth:</span><span>{{dateShort(patient.birthday)}}</span>
</p>
<p class="line">
  <span>Healthcare provider:</span><span>{{provider.name}}</span>
</p>
<p class="line">
  <span>Policy number:</span><span>{{provider.policy}}</span>
</p>

CSS explanation

The display property of the <span> elements is set to inline-block, allowing them to behave like block elements (respecting width and height) while still flowing inline horizontally. The vertical-align: top; ensures that when content spans multiple lines, the tops of the content remain aligned, keeping label-value pairs visually aligned across rows.

.line span {
  display: inline-block;
  vertical-align: top;
}
.line span:first-child {
  width: 35mm;
}
.line span:last-child {
  width: calc(100% - 35mm);
}

The second CSS rule (:first-child) targets the first <span>, which contains the label text. Its width is set to 35mm to ensure all labels align vertically across lines, creating a consistent column effect.

The final rule targets the last <span> on each line, which holds the value. Its width is defined as calc(100% - 35mm), allowing it to occupy the remaining horizontal space next to the fixed-width label. This ensures that longer content wraps neatly onto multiple lines without breaking the layout.

Together, these rules create a clean, two-column layout using inline-block, while preserving semantic HTML structure. The result is accessible content that exports well to PDF/UA. Each line is interpreted as a standalone paragraph, which allows screen readers to read the label and value naturally, with a pause at the end of each line.

PDF/UA validation

To validate a PDF/UA file, you can use screen readers like JAWS or NVDA to manually test how the content is read aloud. Additionally, there are dedicated tools specifically designed to validate PDF/UA compliance. Two commonly used options are the structure tree preview in Adobe Acrobat Pro and the PAC (PDF Accessibility Checker) tool.

The image below shows the Patient Information block in PAC’s Screen Reader Preview mode. In this example, the content was created using the display: inline-block approach discussed earlier. The structure is clearly readable, with each label-value pair presented logically and cleanly.

In contrast, the next image shows the same content laid out using CSS Grid. While it appears correct visually in the PDF, all the content is flattened into a single row in the PDF/UA output, making it less accessible for certain screen readers.

It’s important to note that screen reader behaviour can vary: some may interpret complex layouts in PDF/UA output correctly, while others may not read the content in an accessible or expected manner. This is similar to how email messages may render differently across various email clients and devices; reliable visual appearance does not guarantee consistent accessibility.

Conclusion

When designing for accessibility, especially in documents like invoices, policies, or medical forms, it’s essential to go beyond visual layout and consider how the PDF/UA content is interpreted by assistive technologies. While Flexbox, Grid, and tables can create visually appealing designs, they may not produce consistent or accessible results when exported to PDF/UA.

The inline-block approach offers a practical and accessible alternative. It preserves semantic structure, ensures a logical reading order, and allows each label-value pair to be interpreted clearly by screen readers.