Removing Layout Tables for Accessibility

What are the two types of tables on webpages?

Tables can be identified in two ways: data tables or layout tables. Data tables contain row and column headers that allow a user to understand the cell's content based on the context of the intersection of that row and column.

Classwork

Class Period	Discussion	Reading	Assignment
Week 1	Personal Reflection	Ch 1-2	Video Ad
Week 2	Pop Culture Opinions	Ch 3-4	Peer Review

Layout tables do not have logical headers that can be mapped to information within the table cells. Layout tables were traditionally used to overcome limitations in visual presentation and layout using HTML.

The following examples from WebAIM Links to an external site. help designers understand the experience of a user with a screen reader.

Why can't I use a table to align content on a page?

Tables may cause problems with displaying content when the page is resized or viewed on smaller devices such as phones. Sometimes the smaller page requires users to scroll left and right which may cut off important information since this navigation is not always obvious for users.

For visually impaired users, or anyone using a screen reader to listen to course materials, the content in data tables is navigated by using the arrow keys and will be read using the corresponding column and row information. Screen readers often don't follow reading logic of the layout tables and will present the information from the visual display in the order it is coded.

Remove Layout Tables then Restyle

Instead of copying content within a table and moving it in the rich text editor, it is easiest to remove the table tags from the HTML code. 

Remove Table Code

Open the HTML editor </> under the Rich Content Editor and identify the lines with table tags. <Table> <tbody> <tr> <th> and <td> all reference elements in the table. In this example, lines 3-11 all contain table tags. Delete the tags (all code within the <green pointy brackets>) and leave the content (black font) to reformat later.

Restyle Remaining Content

Choose a different accessible layout such as tabs Links to an external site., columns, Links to an external site. boxes, Links to an external site. or buttons Links to an external site. using HTML code. All of these restyling options can use <div> tags to organize content. For general information about using divs, please review the div accessibility article.

Div Style Options

• border - puts a border around your div. When using this, you need to include the size, color, and style
  • Ex: <div style="border: 10px solid red; ">
• float - this allows a div to be next to another set of text or image. This is key for creating a table effect for formatting
  • Ex: <div style="float: right; ">
  • Ex: <div style="float: left; ">

• padding - allows you do put a buffer within the div on all sides of the div so the text or image does not go to the edge of the div. This is helpful when using a div for formatting instead of a table. This can be added as a number of pixels
  • Ex: <div style="padding: 10px; ">
  • Ex: <div style="padding-top: 10px; ">
  • Ex: <div style="padding-right: 10px; ">
• margin - puts distance between your div and content above, below, left and right. Can be used specifically for one direction as well
  • Ex: <div style="margin: 10px; ">
  • Ex: <div style="margin-left: 10px; ">
  • Ex: <div style="margin-top: 10px; ">

• width - allows you to set a width of your div as a percentage or number of pixels
  
  • Ex: <div style="width: 75%; "> or <div style="width: 800px; ">
• background color - allows you to change the color of the background for that section
  • Ex: <div style="background-color: blue; ">
• text color - allows you to change the color of the text for that section
  • Ex: <div style="color: #4E2A84; ">