WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Using the Summary attribute in tables


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">

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.
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Geethavani.Shamanna
> Sent: Wednesday, July 20, 2022 10:33
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Using the Summary attribute in tables
> Hi Glen,
> The Caption attribute is already being used in tables. However, if the table
> description is a couple of sentences or a paragraph long, where does that
> go? Was the Summary attribute replaced with another one in HTML 5?
> Thanks.
> Geetha
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen
> walker
> Sent: 20 July 2022 18:02
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Using the Summary attribute in tables
> CAUTION: This mail comes from outside the University. Please consider this
> before opening attachments, clicking links, or acting on the content.
> Correct, the summary attribute was deprecated in HTML 5. Instead you should
> use the <caption> element inside a <table>.
> Most (all?) screen readers use the caption as the accessible name of the
> table so that if I navigate using the T shortcut key, the caption will be
> read.
> On Wed, Jul 20, 2022 at 10:14 AM Geethavani.Shamanna <
> <EMAIL REMOVED> > wrote:
>> Hello all,
>> I recently came across a WAI tutorial on tables recommending the use
>> of the Summary attribute to include table description. Is the Summary
>> attribute still in use? If it has been deprecated, what is the best
>> alternative to add table descriptions?
>> Adding a description via a heading above or below the table won't be
>> very useful as it won't be directly associated with the table.
>> Many thanks.
>> Geetha
>> >> >> <a
>> href="https://urldefense.com/v3/__https://eur01.safelinks.protection.outlook.com/?url=http*3A*2F*2Flist__;JSUl!!C5qS4YX3!AhLca3ICYN8bac__OhFv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY3yQSW9L6$">https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist</a>.
>> webaim.org%2F&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7Cda
>> 6cb859a1b24d34e3f708da6a71a4a6%7C0e2ed45596af4100bed3a8e5fd981685%7C0%
>> 7C0%7C637939333571093154%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiL
>> CJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdat
>> aqBeFDvSMvycW4%2ByNMllMzBb8f%2BTgMuoIfNfPHkxoXY%3D&amp;reserved=0
>> List archives at
>> <a
>> href="https://urldefense.com/v3/__https://eur01.safelinks.protection.o
>> utlook.com/?url=http*3A*2F*2Fwebai__;JSUl!!C5qS4YX3!AhLca3ICYN8bac__Oh
>> Fv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY
>> 3_Nk0oN9$">https://eur01.safelinks.protection.outlook.com/?url=http%3A
>> %2F%2Fwebai</a>
>> m.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cgeethavani.shamanna%4
>> 0open.ac.uk%7Cda6cb859a1b24d34e3f708da6a71a4a6%7C0e2ed45596af4100bed3a
>> 8e5fd981685%7C0%7C0%7C637939333571093154%7CUnknown%7CTWFpbGZsb3d8eyJWI
>> joiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7
>> C%7C%7C&amp;sdata=%2FzAxg7UgxfMZcZRlYh3vEbpEQkW0Q8bhKBF7B4eQn8w%3D&amp
>> ;reserved=0 >>
> > > href="https://urldefense.com/v3/__https://eur01.safelinks.protection.outlook.com/?url=http*3A*2F*2Flist.webaim.org*2F&amp;data*7C01*7Cgeethavani.shamanna*40open.ac.uk*7Cda6cb859a1b24d34e3f708da6a71a4a6*7C0e2ed45596af4100bed3a8e5fd981685*7C0*7C0*7C637939333571093154*7CUnknown*7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0*3D*7C3000*7C*7C*7C&amp;sdataqBeFDvSMvycW4*2ByNMllMzBb8f*2BTgMuoIfNfPHkxoXY*3D&amp;reserved=0__;JSUlJSUlJSUlJSUlJSUlJSUlJSUlJQ!!C5qS4YX3!AhLca3ICYN8bac__OhFv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY31aHvvbE$">https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Flist.webaim.org%2F&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7Cda6cb859a1b24d34e3f708da6a71a4a6%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939333571093154%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdataqBeFDvSMvycW4%2ByNMllMzBb8f%2BTgMuoIfNfPHkxoXY%3D&amp;reserved=0</a>
> List archives at <a
> href="https://urldefense.com/v3/__https://eur01.safelinks.protection.outlook.com/?url=http*3A*2F*2Fwebaim.org*2Fdiscussion*2Farchives&amp;data*7C01*7Cgeethavani.shamanna*40open.ac.uk*7Cda6cb859a1b24d34e3f708da6a71a4a6*7C0e2ed45596af4100bed3a8e5fd981685*7C0*7C0*7C637939333571093154*7CUnknown*7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0*3D*7C3000*7C*7C*7C&amp;sdata=*2FzAxg7UgxfMZcZRlYh3vEbpEQkW0Q8bhKBF7B4eQn8w*3D&amp;reserved=0__;JSUlJSUlJSUlJSUlJSUlJSUlJSUlJQ!!C5qS4YX3!AhLca3ICYN8bac__OhFv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY3wV2rPZd$">https://eur01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwebaim.org%2Fdiscussion%2Farchives&amp;data%7C01%7Cgeethavani.shamanna%40open.ac.uk%7Cda6cb859a1b24d34e3f708da6a71a4a6%7C0e2ed45596af4100bed3a8e5fd981685%7C0%7C0%7C637939333571093154%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&amp;sdata=%2FzAxg7UgxfMZcZRlYh3vEbpEQkW0Q8bhKBF7B4eQn8w%3D&amp;reserved=0</a>
> > > > href="https://urldefense.com/v3/__http://list.webaim.org/__;!!C5qS4YX3!AhLca3ICYN8bac__OhFv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY39pjELwI$">http://list.webaim.org/<;/a>
> List archives at <a
> href="https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!C5qS4YX3!AhLca3ICYN8bac__OhFv6OkxopLg4Cmqi4t2V79l0GBPPm6U8H2WNh7RDNN1k_Q0F3SDp3fAMBvJgGLxhf034eyY34BDiqu4$">http://webaim.org/discussion/archives<;/a>
> > > > > >

Work hard. Have fun. Make history.