ULEARN Accessibility Guide Styles Might Be Used For Tabular Data Where Semantic Markup May Be More Appropriate

If a pre element is used for tabular data, change the data to use a well-formed table.

[Course Navigation]

User Experience

What You May Experience

A table with 'pre' elements that, when viewed on a large screen, could be understood by a sighted user.

What Students May Experience

A screenshot of a table using the 'pre' element when viewed on a phone screen. The relationship between headers and cells has been lost.

Why this Matters

The pre element allows you to visually format data so it looks like a table. However, content created with the pre element does not preserve the relationship between table cells and headers, and therefore students using screen readers or viewing the content on small screens will not be able to understand the information.

Given that tables created with the pre element do not have columns and rows, assistive technology cannot navigate the data effectively. Instead, a screen reader treats the content as plain text, reading the information line by line. In the example in the User Experience section, assistive technology might read "Submit quiz" but not be able to convey that the quiz submission is due by 9:00 on Friday.

Moreover, because the pre element relies on line breaks and spacing to format the data, it does not adapt well to different screen sizes like those of tablets or smartphones. If the content is too wide for the screen and the device doesn't automatically enable horizontal scrolling, parts of the text might get cut off, making it impossible for students to see all the data. On a smaller screen, the layout could also become misaligned and therefore difficult to interpret.

How to Fix It

Using a pre element is not a common issue, since most instructors are not adding tables by coding the elements through the Canvas HTML editor. To avoid this issue happening in the first place, be sure to use the Canvas Rich Content Editor or the DesignPLUS sidebar to add tables to your content. If you already have a table that uses the pre element, the easiest way to make that table accessible is to add a table through Canvas or DesignPLUS and then copy and paste the content into the appropriate header and data cells.

Fix in Canvas: In the Canvas Rich Content Editor, add a table with as many rows and columns as you need and copy and paste the information to the relevant cells. Remember to add table headers and scopes to ensure that students using assistive technology have an easy time navigating the content. First, select a cell that should be a header. Then, from the menu bar in the RCE, select Table, then Cell, then Cell Properties, and in the Cell Properties dialog, select “Header” as the Cell type. Finally, select “Column” or “Row” as the Scope. Do this for every header cell.
Fix with DesignPLUS: Use the Add New Element tab of the sidebar to add a Table element. Then, use the RCE to add or remove rows and columns and copy and paste content into the appropriate cells. Use the Table Checker of the Accessibility / Usability tab of the sidebar to add Column and/or Row headers.
Fix in UDOIT: This issue cannot be fixed from the UDOIT interface. Whenever you come across a "Styles Might Be Used For Tabular Data Where Semantic Markup May Be More Appropriate" issue, select it and, below the issue description, find the link that will quickly take you to your content so you can fix it with the Canvas RCE or the DesignPLUS sidebar. When you return to UDOIT, select Scan Now on the top right-hand side to stop the issue from surfacing.

How to fix this issue with the HTML editor in the RCE or DesignPLUS

Last Updated: Oct 24, 2025, 5:31 PM

Created with DesignPLUS

UDOIT Advantage