Setting the logical reading order for Positioned Boxes

When designing templates for accessibility, it’s essential to consider not just how your content looks, but how it is structured. The logical reading order of the content is critical for accessibility, especially for users relying on screen readers or other assistive technology. This order might differ from the visual layout, particularly in documents designed for print.

This tutorial will guide you through the process of setting the logical order for absolute positioned elements in an invoice template, such as the invoice heading, address, customer info, and business details. The goal is to ensure screen readers and assistive technologies follow the correct reading order, while maintaining the intended visual appearance of the document in print and PDF output.

Note: The PDF/UA output 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.

Logic reading order vs. Visual appearance

Screen readers require well-structured content and a clear logical reading order. Think of how someone would read the page linearly, like scrolling through a long narrow page on a mobile phone. On small screens, content is typically stacked vertically, with the most important information appearing first.

This reading experience should determine the order of the HTML elements in your OL Connect template. For example, for information of a Dentist invoice a logical order might be:

  1. Invoice Heading
  2. Recipient Address
  3. Practice/Business Information
  4. Patient Information
  5. Detail Table with line items
  6. Payment Instructions
  7. Terms and Conditions
An image showing a graphical presentation of the logical content order versus how information is positioned on a printed page.

This logical order ensures that users relying on screen readers can easily follow the content in a way that makes sense.

In OL Connect templates, it’s common to use positioned boxes for information like the invoice heading, recipient address, business information, and customer details. While these elements are placed visually in specific positions, their default position in the structure tree (HTML) might be incorrect for assistive technologies. By default, their position is determined by the order in which the objects were created, and they are added to the end of the content.

This approach works well for visual layout, as elements are moved or dragged into their intended positions on the page manually. However, it disrupts the logical reading order for assistive technologies.

Adjusting the logical order for positioned elements

In this tutorial, we will focus on how to adjust the logical order of positioned boxes without changing their visual layout. Here’s how you can do it:

Step 1. Identifying the positioned boxes

Our sample template contains four positioned boxes for the information before the detail table, these are the invoice heading, recipient address, business details, and patient information. These positioned elements are usually placed at the end of the content in the logical structure, which can be validated in the Outline view.

The sample invoice template opened in the Designer. A positioned box is selected and an arrow is pointing to it's position in the Outline view, emphasizing it is at the end of the content.

Step 2. Assigning CSS class names

To make the positioned boxes easier to identify and manage, assign a CSS class name to each box. This will help you organize them better in the Outline view and allow for more specific styling.

To assign a CSS class name:

  1. Select the box in Design view.
  2. In the “Attributes” view, enter a name in the “Class” field (e.g., practice-info, patient-info, recipient-address, invoice-heading).

Now, these elements will display their class names in the Outline view.

The sample invoice template opened in the Designer. The Outline view shows the div elements for the positioned boxes with the assigned CSS class names.

Step 3. Rearranging the Logic Order

To correct the logical reading order:

  1. Open the Outline view and click on the .invoice-heading element.
  2. Drag it to the top of the Outline view, just below the “Page 1” entry.
  3. Repeat the same process for the other positioned boxes.
Two images of the Outline view where the first shows the drag and drop action to arrange the order of the div elements and the second part shows the new location of these elements.

These changes will not affect the visual layout of your document, but they will ensure that screen readers and assistive technologies follow the correct logical order when reading the document.

Final thoughts

When generating a PDF/UA (Universal Accessibility) file, the logical reading order becomes especially important. For accessibility, it’s good practice to use heading tags to structure the content. For example, the text INVOICE in our sample is marked as Heading 1 (H1), and subsequent sections use Heading 2 (H2), to provide a clear, navigable structure for screen readers.

By following these steps, your OL Connect invoice template will be accessible, with a logical reading order that works well for screen readers, all while maintaining the visual design.