WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: table headers attribute question

for

From: Birkir R. Gunnarsson
Date: May 22, 2020 11:26AM

Hi

Your table has a number of issues.
1. The cell at the top needs to be a caption, if you hvae a header
cell that spans the whole table it gets announced with any other
header cells and it makes the table near impossible to understand, use
the <caption> element for table titles.
Outside of that, you can use the headers attribute if the target is a
<th> cell and has a unique id, you can't use it if the header cell is
just a <td> (or at least this was the requirement in the last HTML5
spec I saw).
If a header cell spans multiple columns use scope="colgroup" and a
corresponding colspan attribute.
If it spans multiple rows, use scope="rowgroup" and a corresponding
rowspan attribute.

Also, if possible, avoid having header cells in the middle of your
table, for that, try to break it up into a series of smaller tables.
For your particular design you probably should use the headers
attribute, but try to break it down instead.

You can use the ANDI tool from the Social Security Administration to
explore tables manually to see header cells and such.


On 5/21/20, Mark Guisinger via WebAIM-Forum
< <EMAIL REMOVED> > wrote:
> All,I have been looking at different accessibility scanning tools, WAVE,
> Deque, and others.  I have noticed that not all of them point out a complex
> table with multiple levels of headers point out that the code should use
> scope or the headers attribute tom which one would be required to pass
> 1.3.1: Info and relationships.  I have attached a sample table where one
> section header 2 portion has the correct headers attribute.  I would think
> that the other parts of the table would be flagged in the scanning tools.
> Am I missing something?.
> Thanks in advance for any insights,Mark Guisinger


--
Work hard. Have fun. Make history.