WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible table where some data spans multiple columns

for

From: glen walker
Date: Nov 13, 2018 8:02AM

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>