For training that enhances your effectiveness and inspires your students.

Formatting Tables (Webpage/LMS)

Tables need to be appropriately structured with informational headers.  Tables in documents or web pages need to have appropriate structural elements and informational headers in order for users of screen readers to be able to navigate and decode the information.


Standard

Example of Standard in Action

Shelly’s Daughters

 Name  Age  Birthday
 Jackie  5  April 5
 Beth  8  January 14

To make the table above accessible to screen reader users and other users with low vision, the following HTML markup should be used:

1. Data tables very often have brief descriptive text before or after the table that indicates the content of that table. This text should be associated to its respective table using the <caption> element. The <caption> element must be the first thing after the opening <table> tag.

<table>
<caption>Shelly’s Daughters</caption>

2. A critical step toward creating an accessible data table is to designate row and/or column headers. In the markup, the <td> element is used for table data cells and the <th> element is used for table header cells.

3. Now that we’ve created headers, we need to associate the data cells with the appropriate headers using the scope attribute. The scope attribute identifies whether a table header is a column header or a row header. All <th> elements should generally always have a scope attribute. While screen readers may correctly guess whether a header is a column header or a row header based on the table layout, assigning a scope makes this unambiguous.

Here is the markup for the table, using the scope attribute:

<tr>
<th scope=”col”>Name</th>
<th scope=”col”>Age</th>
<th scope=”col”>Birthday</th>
</tr>

<tr>
<th scope=”row”>Jackie</th>
<td>5</td>
<td>April 5</td>
</tr>

<tr>
<th scope=”row”>Beth</th>
<td>8</td>
<td>January 14</td>
</tr>

</table>

Example of Issue

If you’re not a screen reader user, let’s pretend that you are for just a moment. You’re going to a web site to find out where the biology 205 class is going to be held. You go to a web page or document that has this information, and this is what you hear:

“Table with 10 columns and 7 rows. Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.”

After listening to this information, do you have any idea where biology 205 is supposed to be held? Probably not. When you listen to tables straight through, without going into table reading mode in a screen reader, this type of information can be quite confusing. Even when you do go into table reading mode, it can still be confusing if the table is not marked up properly.

Locating the Issue in Your Course

You will want to look through your course for each page that has a data table.  In order to test whether a table is correctly structured, you can either look at the HTML to make sure that the table has a <caption> description and the row headers <tr> and column headers <th> have appropriate descriptions otherwise you can use the Web Accessibility Evaluation Tool (WAVE) to test the tables on a page.

Resources to Align with Standard

  • WebAIM (Web Accessibility in Mind) provides web accessibility solutions to individuals with disabilities. Links provided will give you information about the different types of visual impairments, such as blindness, colorblindness and low vision and how to make the web more accessible to users with visual disabilities.

Links to Related Articles

Leave a Reply