WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Properly repeat table headers

for

From: Joe Chidzik
Date: Feb 21, 2013 7:06AM

> All,
>
> I am working with somebody who has a long table 60+ rows. Right now they are
> more or less throwing table headers in as you scroll down.
>
> I cannot throw aria-hidden on them because everybody (intranet page) is using IE8.
> The owner won't split the table up into smaller ones (there is some natural
> groupings).
> I suggested maybe wrapping the rows in a tbody, give it a decent height, then
> have it scroll. The owner wants the table to fill the page.
>
> Putting <th>'s in the table, mid-table, which doesn't give new information just feels
> weird. The only other thing I can think of is make them normal cells, and style them
> like the headers.

[Joe Chidzik] I saw a solution to a similar issue recently. There was a lengthy table, contained in an iframe, with (50+ rows), and with only 10 visible at a time. There was a separate table, containing just headers, above the iframe. The iframe table had a headers row, which was hidden offscreen with CSS. Sighted users, could scroll in the iframe, to scroll through the table content whilst the table containing just headers above this remained static and visible. Screenreader users could similarly access the table in the iframe, and had the hidden headers read out for them. Perhaps in this case the table containing only headers could be marked up with role="presentation" so that screenreaders ignored it.

Clearly this is not ideal; there's a table with no data and only headers, after all. But whilst semantically unpleasing, it did work.

Joe