WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using the Summary attribute in tables

for

From: Birkir R. Gunnarsson
Date: Jul 20, 2022 2:53PM

Caption maps to a table's accessible name, you can also use aria-label
(for a screen reader only name) or aria-labelledby (if the table is
labeled by a heading above it). Tables should have an accessible name,
but it's not a must.

summary (wen it existed) maps to a table's accessible description. If
the description text is short (1 or 2 sentences, no lists or links or
other embedded elements) you can linked to it from the table using
aria-describedby. The text can be visible to all or visually hidden
(visible only to a screen reader user).

<div class="sr-only" id="t1Desc">table summary content goes here</div>
<table aria-describedby="t1Desc">
...
</table>

If the description is more complex, e.g. you may have to click a
button in the description to make the table configuration more
accessible, or something like that, create a short description for the
table that tells user where they can find the longer description,
something like "navigate to the next h3 heading for a full
description" and use aria-describedby on the table to point to the
short description text.

You do this because accessible description text is announced as one
string, there is no mention of interactive elements, so an accessible
description must be short, simple, and to the point.



On 7/20/22, Jeremy Echols < <EMAIL REMOVED> > wrote:
> I believe I've seen it recommended to use aria-describedby pointing to a
> separate element that contains your summary text. That way you get the
> general functionality of a summary element, it's still visible to sighted
> users, etc.
>
>