0:06
Speaker: Welcome! Content Lab brings you the next video in our series about accessible content practices for web authors.
0:12
In this video, you'll learn about making accessible tables in the Mass.gov CMS.
0:18
We'll focus on tables you build in rich text fields.
0:23
Building a simple table in a rich text field makes sense when you need to organize similar types of data or information for quick, easy scanning or reference.
0:32
This table on the Saltwater Fishing Derby Rules page organizes data in a predictable way so you can quickly see the minimum weights and lengths for each ground fish species to qualify for the competition.
0:45
Here is a table that does not organize information for easy use.
0:49
Listing these language translations in a table with no headers was a design choice.
0:53
Maybe the author wanted to save vertical space on the page, but you don't want to use tables for design reasons.
0:59
That's not the purpose of a table, and a screen reader can't correctly read a table without headers.
1:05
Using tables for the right reasons is good content practice, but it's also good accessibility practice.
1:11
We will explain why in this video.
4:14
Screen readers will say the name of the character, like "hashtag."
4:18
Instead, write out the word "number" or "percent" instead of using the characters.
4:25
Avoid abbreviations in tables unless they're spelled out in the header or the first time they're used.
4:30
On this page about bar exams, for example, Multi State Performance Test is written out with "MPT" in parentheses in the header as a way to introduce the acronym.
4:40
Make sure the data in the table is consistent in type and format.
4:45
In this table about hiking trails, for example, notice that each park name is hyperlinked.
4:50
Notice too that the mileage and activity level for each trail follows a consistent format.
4:57
Information in a table is easier for every user to scan and consume when it follows a consistent format.
5:04
Remember, an accessible table organizes data.
5:07
You don't want to use tables for layout.
5:10
Notice that this Group Insurance Commission table arranges newsletter copy about member links side by side, Editoria11y flags it as inaccessible because the table has no proper column headers.
5:22
Instead, the headings are in the same cell as the information.
5:26
Screen readers can't correctly announce the information in a table that's not properly formatted.
5:32
So while it may be tempting to use tables for layout purposes, it's best to avoid that practice.
5:38
Tables do make sense for quick lookup purposes.
5:42
These tables about camping fees organize that information for easy scanning.
5:47
Certain choices you might make with headers will lead to a confusing screen reader experience.
5:52
Here are some things to avoid:
5:54
Do not add extra empty header rows as this table does.
5:58
The screen reader will read these as blank.
6:01
Note that Editoria11y flags this error.
6:05
Do not use stacked headers as this table does, because the screen reader will reference the top header as it works through each cell and will not recognize the second header row.
6:15
The person listening won't get the correct context for the data in any of the columns.
6:21
The same table also merges cells in the first row.
6:24
Avoid that practice.
6:26
Also, do not split cells.
6:28
The user won't have the correct header as context for the data.
6:32
Note that Editoria11y does not catch all of these issues.
6:36
It's not a perfect accessibility checker.
6:38
It's up to you to catch what Editoria11y misses.
6:43
If your table cells contain links, use descriptive link text as you would anywhere else.
6:49
Not URLs or text that says things like,
6:52
"Click here."
6:54
You can learn more about descriptive link text in our video on that topic.
6:58
Make sure to format phone numbers and emails as links so people on mobile devices can tap the number to make a call or tap the e-mail address to write an e-mail.
7:08
You can learn more about linking phone numbers in our video about accessibility practices for people using mobile devices.
7:15
Simple, accessible tables where information is presented in a predictable way are useful for everyone, and they're essential for people using screen readers and other assistive technologies.
7:26
For more help with accessibility practices, check out the ACCESS Team's resources.