Is the pre element used to create a table?

Is the pre element used to create a table?

1.3.1 Info and Relationships

Introduction

This document provides information about the Acquia Web Governance accessibility (glossary term, activate to view definition) check:

• Is the pre element used to create a table?

What

This check identifies instances where the <pre> tag is used to present data in a table or column-based layout. When the <pre> element is used for visual layouts, screen reader users and others may find it difficult to understand and navigate the data structure properly.

Why

Problems can occur when the <pre> element is used to simulate tables because this method relies on visual spacing and monospaced fonts to align data. This method provides no structural information to assistive technologies (glossary term, activate to view definition). Screen reader users cannot navigate between rows and columns or understand the relationships between data points. Users who require text resizing may find that simulated tables become unreadable when the font size is increased.

Who

Affected users

This check affects the following users who have:

• Blindness or vision impairments: Who navigate websites with keyboard commands and use screen reader software.
• Low Vision: Who require text resizing and may find that simulated tables break or become illegible when the font size is increased. This group of users includes many elderly due to natural age-related vision loss.

Examples

Pass example

The data is structured with semantic HTML table elements. This allows for clear navigation and interpretation by assistive technology.

HTML

<table>
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>Developer</td>
  </tr>
</table>

Fail example

The data is formatted into columns with white space inside a <pre> tag, which lacks semantic meaning and table structure.

HTML

<pre>
Name          Role
Jane Doe      Developer
John Smith    Designer
</pre>

How

This section provides information on how to review and fix the issue. 

How to review it 

Identify any <pre> elements on the page and determine if they present tabular data. You can use the Web Governance Browser Extension to identify the element on the page or in the HTML source code. Determine if the content relies on visual alignment to represent a grid or columns. If the answer is yes, the check fails and you must restructure the content.

How to fix it

Replace the <pre> tags with semantic HTML table elements. Use the <table> tag to define the table:

• Use<tr> for rows

• Use <th> for headers

• Use  <td> for data cells

This ensures that screen readers can correctly announce the data and allow users to navigate through the rows and columns. If the content is not a table but requires specific formatting, you can use CSS for layout instead of the <pre> tag.

Additional resources

This section contains useful resources for this subject.

WCAG success criteria

1.3.1 Info and Relationships

• Is the pre element used to create a table?

What

This check identifies instances where the <pre> tag is used to present data in a table or column-based layout. When the <pre> element is used for visual layouts, screen reader users and others may find it difficult to understand and navigate the data structure properly.

Why

Problems can occur when the <pre> element is used to simulate tables because this method relies on visual spacing and monospaced fonts to align data. This method provides no structural information to assistive technologies (glossary term, activate to view definition). Screen reader users cannot navigate between rows and columns or understand the relationships between data points. Users who require text resizing may find that simulated tables become unreadable when the font size is increased.

Who

Affected users

This check affects the following users who have:

• Blindness or vision impairments: Who navigate websites with keyboard commands and use screen reader software.
• Low Vision: Who require text resizing and may find that simulated tables break or become illegible when the font size is increased. This group of users includes many elderly due to natural age-related vision loss.

Examples

Pass example

The data is structured with semantic HTML table elements. This allows for clear navigation and interpretation by assistive technology.

HTML

Fail example

The data is formatted into columns with white space inside a <pre> tag, which lacks semantic meaning and table structure.

HTML

How

This section provides information on how to review and fix the issue. 

How to review it 

Identify any <pre> elements on the page and determine if they present tabular data. You can use the Web Governance Browser Extension to identify the element on the page or in the HTML source code. Determine if the content relies on visual alignment to represent a grid or columns. If the answer is yes, the check fails and you must restructure the content.

How to fix it

Replace the <pre> tags with semantic HTML table elements. Use the <table> tag to define the table:

• Use<tr> for rows

• Use <th> for headers

• Use  <td> for data cells

This ensures that screen readers can correctly announce the data and allow users to navigate through the rows and columns. If the content is not a table but requires specific formatting, you can use CSS for layout instead of the <pre> tag.

Additional resources

This section contains useful resources for this subject.

WCAG success criteria

1.3.1 Info and Relationships