Tables | Accessible U

Skip to main content

Breadcrumb

1. Office for Digital Accessibility (ODA)
2. What You Can Do
3. Start with the 7 Core Skills
4. Tables

Tables

Summary

Simplify tables and include a header row and/or column and a summary, either in a caption or alt text.

• Impact
• Dos and Don'ts
• How-to

Impact

Impact

When sighted users focus on a table cell, they are able to visually determine which row and column the cell is in by scanning up and down or left and right. This adds context to what the value in a particular cell means.

On the other hand, a screen reader can only read aloud each cell one by one from left to right and top to bottom.

If the table is not formatted correctly, there is no easy way to determine what label a particular value in a cell might have.

Example

If you are not a screen reader user, pretend that you are and you want to find the location of a biology 205 class. You find a webpage with an incorrectly formatted table and you hear the following text read out loud. Do you know where the class will be held?

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.

Creating Accessible Tables from WebAIM

Dos and Don'ts

Dos and Don'ts

Expand all

+ Use Tables to Display Data

Tables traditionally show the relationship between two or more items in rows and columns. But in the early days of the internet, Web designers and developers commonly used tables to control the layout of webpage content as well because they couldn't easily do so with HTML.

Content creators sometimes use tables in word processing documents to similarly control where content is placed rather than to indicate data relationships.

But screen reader software may not read cells in such tables in the proper order, and page layout can now be better controlled with CSS on webpages and with other tools in document creation software.

Do

Use tables to present information in a grid, or matrix, with columns or rows that show the meaning of the information.

Do Example

University of Minnesota Enrollment by Campus

Campus	Undergraduates	Graduate and Professional Students
Crookston	1,835	N/A
Duluth	8,834	979
Morris	1,499	N/A
Rochester	534	102
Twin Cities	31,367	16,940

Don't

Don't use tables to make your webpage look a particular way. Layout tables on webpages do not pose inherent accessibility issues, but it is more difficult to make sure screen reader software reads the cells in the proper order.

Never use tables as a means of laying out a page in a Google or Microsoft Word document. While these tables can be hidden from visual users by simply eliminating the borders between cells, they cannot be hidden from screen readers.

Don't Example

University of Minnesota
Crookston	Duluth
Morris	Rochester
Twin Cities

+ Designate Row and/or Column Headers

Users who are blind or visually impaired can process the information displayed in a table when their screen reader software reads which row and column header each cell refers to before the content in the cell.

Do

Designate at least one row and/or column header using the table formatting tools in your web content management system or document creation software.

Use the <th> element to mark up table headers in HTML.

Do Example

University of Minnesota Disability Resource Centers, by Campus

Campus	Address	Contact Information
Crookston	247 Sargeant Student Center 2900 University Ave. Crookston, MN 56716	Disability Resource Center 218-281-8587, 800-627-3529 TTY [email protected]
Duluth	258 Kirby Student Center 1120 Kirby Drive Duluth, MN 55812	Disability Resources 218-726-8217 [email protected]
Morris	240 Briggs Library 600 East 4th Street Morris, MN 56267	Disability Resource Center 320-589-6178 [email protected]
Rochester	258 Kirby Student Center 1120 Kirby Drive Duluth, MN 55812	Disability Resources 507-258-8058 [email protected]
Twin Cities	180 McNamara Alumni Ctr 200 Oak Street SE Minneapolis, MN 55455	Disability Resource Center 612-626-1333 [email protected]

Don't

Don't create tables without table headers.

Don't just change the visual formatting of the text, such as the font size or color, to visually indicate table header rows and/or columns. Screen readers will not be able to associate the headers with the correct cells.

Table headers should never be empty. This is particularly of concern for the top-left cell of some tables.

Don't Example

University of Minnesota Campus Disability Resource Centers

Crookston	247 Sargeant Student Center 2900 University Ave. Crookston, MN 56716	Disability Resource Center 218-281-8587, 800-627-3529 TTY [email protected]
Duluth	258 Kirby Student Center 1120 Kirby Drive Duluth, MN 55812	Disability Resources 218-726-8217 [email protected]
Morris	240 Briggs Library 600 East 4th Street Morris, MN 56267	Disability Resource Center 320-589-6178 [email protected]
Rochester	258 Kirby Student Center 1120 Kirby Drive Duluth, MN 55812	Disability Resources 507-258-8058 [email protected]
Twin Cities	180 McNamara Alumni Ctr 200 Oak Street SE Minneapolis, MN 55455	Disability Resource Center 612-626-1333 [email protected]

+ Avoid or Simplify Complex Tables

Simple tables are easier for users of assistive technologies to understand and navigate, because screen readers essentially ignore that the content is inside a table. HTML code maintenance may be easier for simple tables as well.

Do

Include a maximum of one header row and one header column.

Spell out abbreviations or acronyms, or use the <abbr> or <acronym> tags in HTML to ensure accessibility.

If your table has multiple header rows, merged cells, or another table embedded in it, split it into two or more simple tables.

If you do create a complex data table on a webpage, use the <scope> tag to programmatically associate the data cells with the appropriate headers.

Do Example

Percentage of Course Grade: Exams

Course	Exam 1	Exam 2	Final Exam
Chemistry	20%	20%	60%
Biology	25%	25%	50%

Percentage of Course Grade: Projects

Course	Project 1	Project 2	Final Project
Chemistry	10%	10%	80%
Biology	30%	30%	40%

Don't

Don't merge cells.

Don't include a table within another table.

Don't Example

Percentage of Course Grade: Exams and Projects

Exams			Projects
1	2	Final	1	2	Final
Chemistry	20%	20%	60%	10%	10%	80%
Biology	25%	25%	50%	30%	30%	40%

+ Provide Contextual Information

Data tables often have contextual information around them that helps users understand the content of the table.

Do

Associate descriptive text about a table with its respective table by including a <caption> element in HTML or alt text in Microsoft Word. Captions are not necessary for each table, but can helpful for screen reader users. The caption can be visually formatted and positioned above or below the table as needed, but on webpages, the <caption> element must be the first one after the opening <table> tag.

You may use <thead>, <tfoot>, and <tbody> tags in HTML tables so that the head and/or foot rows repeat at the top or bottom of the table when it is printed, but these do not provide any additional accessibility benefits.

Do Example

Don't

Don't repeat the same text in the caption that appears in a heading preceding the table.

You may provide a summary of the structure of the data table (not of the content) using the <summary> attribute, but screen reader support for it varies, and it is not part of the HTML5 specification, so WebAim does not recommend it.

If both a caption and summary are provided for one table, the summary should not duplicate information present in the caption.

Don't Example

Enrollment by Campus

University of Minnesota Enrollment by Campus

Campus	Undergraduates	Graduate and Professional Students
Crookston	1,835	none
Duluth	8,834	979
Morris	1,499	none
Rochester	534	102
Twin Cities	31,367	16,940

+ Include Content in All Cells

When they encounter empty cells within tables, both visual and screen reader users may wonder if data was omitted by mistake. In addition, screen reader software may skip reading empty data cells, causing mismatches between header rows and their corresponding data cells.

Do

Include text such as "not applicable," "none," etc. to indicate that there is no data in empty cells.

Do Example

Percentage of Course Grade: Exams

Course	Exam 1	Exam 2	Final Exam
Chemistry	40%	None	60%
Biology	25%	25%	50%

Don't

Don't leave any table cells empty.

Don't Example

Percentage of Course Grade: Exams

Exam 1	Exam 2	Final Exam
Chemistry	40%	60%
Biology	25%	25%	50%

How-to

How-to

You can create accessible tables on UMN websites that use the Folwell Design System.

WebAIM's Creating Accessible Tables: Layout Tables

Get Help With Digital Accessibility

The ODA team is available to answer questions and provide guidance and support to the University of Minnesota community.

Request ODA Services

Request or Provide Accommodations

All campuses of the University of Minnesota have staff who facilitate access for students, faculty, and staff with documented disabilities so they can learn, work, and participate in campus life.

Contact Your Campus Disability Resource Center (DRC)

• Accessibility at UMN
  • About the ODA
  • Understanding Disability
  • Understanding Accessibility
  • Legal Obligations
  • University Policy
• What You Can Do
  • Start with the 7 Core Skills
    • Alternative Text
    • Contrast
    • Headings
    • Links
    • Lists
    • Tables
    • Video and Audio
  • Choose and Create Accessible Content
    • Email and Mass Email
    • Documents and PDFs
    • Images
    • Slide Presentations
    • Social Media
    • Spreadsheets
    • Text
  • Use Inclusive Teaching Strategies
    • Classroom Activities
    • Classroom Barriers
    • Course Materials
    • Course Syllabi
    • Teaching Resources
  • Host Inclusive Meetings and Events
    • Online Meetings
    • Face-to-Face Meetings and Events
  • Develop Accessible Websites and Applications
    • ARIA
    • Form Controls
    • HTML and CSS
    • Image Tags and Styles
    • Link Tags and Styles
    • Scripts
    • Table Tags and Styles
  • Include Accessibility in Processes
    • Plan for Accessibility
    • Test for Accessibility
    • Purchase Accessible Technologies
• Help and Training
  • Request ODA Services
  • Take Accessibility Training
  • Find Accessibility Resources
  • Contact Us
    • Accessible U Committee
• Groups and Events
  • Attend Events and View Recordings
  • Join Accessibility Groups