WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible table where some data spans multiple columns

for

From: Jeremy Echols
Date: Nov 13, 2018 8:25AM

Interesting. I knew about associating multiple headers, but didn't know that was necessary just for colspans. I also didn't really see the table as being confusing, but now that you point that out, it does indeed seem a little difficult to navigate.

Thanks for all the info everybody!

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen walker
Sent: Tuesday, November 13, 2018 7:03 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible table where some data spans multiple columns

In general, as stated already, the <th scope=row/col> works great for associating headers with data cells. The id/header attributes aren't normally needed.

And spanned row or column headers also works pretty well. But in your case, none of your headers are spanned but rather the data cells are spanned. One could argue that maybe the screen reader should figure out that a data cell that's spanned has multiple headers, but in the meantime, the headers attribute fixes the problem. I tried a quick test with JAWS on IE and NVDA on firefox and the following read multiple column headers.

1. Added an ID to each column header.
2. Added a header attribute to two of the data cells (just to test those two - I didn't update the entire table). It's only needed for the spanned cells.

However, visually, I find the table hard to scan because there is no consistent cell shape. I can't read a column header and then scan down to find the fee. So while spanned data cells might seem like a good idea in this case to convey that all the different headers have the same charge, I'm not sure that's conveyed very well.


<thead>
<tr>
<th scope="col" id="col1">Borrower type/Material type</th>
<th scope="col" id="col2">Faculty/Staff</th>
<th scope="col" id="col3">Grad Student or Honors Student</th>
<th scope="col" id="col4">Undergrad or Community Ed.</th>
<th scope="col" id="col5">Member, UO Alum Assoc.</th>
<th scope="col" id="col6">Oregon Card and NCU</th>
</tr>
</thead>

...
<tr>
<th scope="row">General Materials</th>
<td style="text-align: center;">No general fines<br>
$5/day recall fine (max=$20)</td>
<td colspan="4" style="text-align: center;" headers="col3 col4 col5 col5">$0.50/day (max=$20)</td>
</tr>
<tr>
<th scope="row">Summit Loans</th>
<td style="text-align: center;">$0.50/day (max=$20</td>
<td colspan="2" style="text-align: center;" headers="col3 col4">$0.50/day (max=$20)</td>
<td style="text-align: center;">NA</td>
<td style="text-align: center;">NA</td>
</tr>