Research Guides: Accessibility Best Practices for LibGuide Content Creators: Tables

Types of Tables | Using Tables in LibGuides | Resources

Let's start by getting this out of the way - tables are somewhat difficult to make accessible. Why? Because tables primarily lay out information in a visual manner. To highlight this, let's look at an example from WebAIM.

Excerpt from WebAim ©: Creating Accessible Tables - Layout Tables

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 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. ^[1]

On this page, we will lay out some of the basics to help make your tables accessible and suggest times when you may want to find an alternative or seek assistance. First though, let's look at the two types of tables - Layout Tables and Data Tables.

Layout Tables

Layout tables are tables used to organize the placement of items on your site. In the past, this was a pretty good way to control the look of your site. You could control spacing, background colors, borders, etc. However, layout tables are not very accessible and should be avoided.

Best Practice:

In general, you should avoid using Layout Tables on your LibGuides. Instead, CSS should be used. (For assistance creating layouts using CSS, contact a member of the LibGuides Working Group at ut_libguides@live.utk.edu.)

Data Tables

Data tables are used to display tabular data - data that is stored in rows and columns. Data tables should be the only type of tables used on your guides; however, there are still limitations to the type and amount of data you can add to your table. These limitations and best practices are discussed in the next section.

Using the Rich Text Editor

Now let's look at the steps you can take using the LibGuide Text Editor to make your data tables as accessible as possible.

Tip:

All of the items discussed in the section can be accessed using the Table Properties option in the LibGuide Text Editor.

Example of the LibGuides Table Properties opened and highlighted.

Add Headers

Using Column and/or Row headers is one of the most basic (and important) ways to make your table accessible. These items identify to your users that all of the data in this column/row is associated with the heading.

Further, when combined with the <scope> attribute, which will be discussed in the next section, you are able to link data in each row or column back to the header.

Add a Caption and Summary

Excerpt from W3C: Web Accessibility Tutorials - Tables - Caption & Summary

A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it’s about and decide if they want to read it. If the user uses “Tables Mode”, captions are the primary mechanism to identify tables.

A summary conveys information about the organization of the data in a table and helps users navigate it. For example, if a table has an unusual structure, information about what content can be found in which row or column can be provided to the user. A summary is usually only needed for complex tables. ^[2]

Alternate Colors

Excerpt from W3C: Web Accessibility Tutorials - Tables - Tips and Tricks

Zebra tables: Styling even and odd rows in a different way can be helpful to people who have reading difficulties or who enlarge text. It acts as a visual guide. Highlighting the cell (and row/column) on mouseover and keyboard focus to support people to see where they are. ^[3]

To create alternating rows of color in a LibGuide table, select the Class drop-down menu and choose table table-striped. (Other options, such as adding a border to your table, are also available in this menu.)

Limit Columns and Rows

The boxes used to create content areas in LibGuides cannot hold a large number of columns without breaking through the borders. (The number of columns that will break the bounding box is dependent upon your guide setup, the amount of information in each cell, etc.) Don't add more columns than can be contained by the LibGuide box. Use the Preview to test the limitations.

Likewise, if you have too many rows, it becomes difficult to track which cell is associated with which header.

Breakup Complex and Large Tables

Excerpt from W3C: Web Accessibility Tutorials - Tables - Tips and Tricks

Keep it simple: Complex tables are more work for content creators as well as being harder to interpret for users. It’s usually better to break up complex tables into simple individual tables, each containing the data for one sub-topic. ^[3]

In the Source Code

This next set of suggestions takes place in the source code. If you are unfamiliar or uncomfortable making changes to lines of code, contact a member of the LibGuides Working Group at ut_libguides@live.utk.edu for assistance.

Scope Attributes

Excerpt from W3C: Using the scope attribute to associate header cells and data cells in data tables

[The scope attribute is used] to associate header cells with data cells in complex tables. The scope attribute may be used to clarify the scope of any cell used as a header. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively. ^[4]

The scope attribute tells the browser and screen reader that everything within a column that is associated to the header with scope="col" in that column, and that a cell with scope="row" is a header for all cells in that row.

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. ^[5]

Headers and ID Attributes

Excerpt from MDN Web Docs: HTML table advanced features and accessibility

An alternative to using the scope attribute is to use id and headers attributes to create associations between headers and cells. The way they are used is as follows:

You add a unique id to each <th> element.
You add a headers attribute to each <td> element. Each headers attribute has to contain a list of the ids of all the <th> elements that act as a header for that cell, separated by spaces.

This gives your HTML table an explicit definition of the position of each cell in the table, defined by the header(s) for each column and row it is part of, kind of like a spreadsheet. For it to work well, the table really needs both column and row headers. ^[6]

Several examples of using the header and id attributes can be found on the W3C site: Tables with multi-level headers.

CSS & Responsive Tables

Currently, there is no single best way to create CSS that will make your table responsive; however, there are options. Depending on the information you have in your table, you may want to have your table scroll, collapse by rows, or collapse by columns. There are also options available to display the data in your table as a list if the screen gets below a certain size. It is worth noting that these options are not easy or quick. If your table gets to be too much work, it may be worth rethinking how you are displaying the data.

More information about creating responsive accessible tables can be found: