WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Question on a caption for Accessible Tables with Navigation

for

From: Birkir R. Gunnarsson
Date: Sep 16, 2019 5:15PM

That is a matter for screen reader vendors mostly.
This is a bit like the page title (the <title> element).
Jaws fouses on it and it is the first line in the virtual buffer.
NvDA announces it but it is not part of the virtual buffer.
I like the NVDA approach better when it comes to tables, announce It
but don't make it a part of the table, or at least alow table
navigation from it (maybe assume it is in the same place as the top
left cornercell).
Definitely something to file an issue about and spark a healthy debate.

The second table you suggest Mike looks much better.
There are two tings I would change there.

1. don't make the "select all" checkbox a <th>, just leave it as a
<td>, else a screen reader will announce "select all" before
announcing the label of any checkbox in the table, if you use table
navigation.
2. Keep in mind that screen readers announce the text referenced with
aria-describedby as one continuous string. The level of detail you put
into your description elemen is way too much to be understood as a
flat string.
I'd rather use aria-describedby to describe where you can find a
screen reader description of the table.
e.g.
<span id="description">A description of this table is availabel as an
h3 heading below the table</span>
<table aria-describedby="description">
t content.able
</table>
<div class="screenREader">
<h3>Table description</h3>
...
</div>

Then add an h3 heading with text like "table description" at the start
of your screen rader description element and place it where the
insturctions put it.
There is an ARIA attribute that would be perfect for this, although t
is meant for a long description of images, but whether it is images or
tables, it is not really supported by assistive technology.
The attribute is aria-details



On 9/15/19, <EMAIL REMOVED> < <EMAIL REMOVED> > wrote:
> Mike,
>
> That is good to know. But still the bigger question is the behaviour of
> screen readers with captions present in tables. Why is there a difference?
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Mike
> Barlow
> Sent: Sunday, 15 September 2019 11:04 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Question on a caption for Accessible Tables with
> Navigation
>
> @mhysnm1964 - The summary <https://www.w3.org/TR/WCAG20-TECHS/H73.html> is
> deprecated in HTML5 (though there is a new summary tag as a component of
> the
> new details tag
> <https://www.w3.org/TR/2011/WD-html5-author-20110809/the-details-element.htm
> l>)
> so in the long run it doesn't matter (which is why I was thinking of using
> an aria-describedby)
>
>
> *Mike Barlow*
> Development Manager
> Web Accessibility/Section 508 SME
>
> Lancaster, Pa 17601
> Office: 732.835-7557
> Cell: 732.682.8226
> e-mail: <EMAIL REMOVED>
>
>
> On Sun, Sep 15, 2019 at 2:12 AM < <EMAIL REMOVED> > wrote:
>
>> All,
>>
>> In relation to Captions and summaries. What should be the correct
>> behaviour for a screen reader. As Jaws and NVDA handle the caption
>> differently. I cannot recall how they handle summaries.
>>
>> Jaws does not permit you to start to navigate the table until you are
>> on the first cell. NVDA appears to permit this when you are in the
>> caption. Have not tested this with Voiceover.
>>
>>
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Saturday, 14 September 2019 1:14 PM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] Question on a caption for Accessible Tables with
>> Navigation
>>
>> You should use the caption for the name of the table, not to describe it.
>> <table>
>> <caption>Table 1 - 2018 profits</capction> ..
>> </table>
>> The caption should uniquely identify the table, it should not describe
>> it.
>> A simple table does not need description, screen readers announce the
>> number of rows and columns based on the <table> element.
>> Users also explore tables with a screen reader so they don't have to
>> be told what is in each row, just make sure to uniquely label all
>> controls in the table, e.g.
>> <td>
>> <input aria-label="select row 1" type="checkbox"> </td> ..
>> <td>
>> <button aria-label="delete row 1"</button>
>> ></td>
>> If there are controls for each table, make sure the name of the
>> navigation or grouping element for those controls matches the caption of
> the table.
>> <div role="navigation" aria-label="modify 2018 profits table">
>> controls </div> If a table is larger than the visible section on the
>> page you can use aria-rowindex on the <tr> elements to indicate this.
>> <tr aria-rowindex="11"> - the 11th row in a table, assuming that you
>> only see 10 rows at a time).
>> Only use aria-rowindex if a portion when the table are displayed, if
>> the whole table is displayed the screen reader calculates the relative
>> position of each table row.
>>
>>
>> On 9/13/19, Mike Barlow < <EMAIL REMOVED> > wrote:
>> > I'm working on an application with many tables in the application.
>> > Most tables look like this
>> > [image: ASimpleTable.png]
>> > Currently the table caption is typically something like this:
>> >
>> > <caption>Below is a table with "N" items</caption>
>> >
>> >
>> > Now if that was the only table on a page and just had a low number
>> > of items that might be sufficient (IMHO) But there can be multiple
>> > tables on a page and each table can have a large number of rows so
>> > there's a couple of navigation elements for each table.
>> >
>> > 1. # of rows per table page
>> > 2.Breadcrumbs for each page of "N" rows
>> >
>> > Now assuming that this is NOT the only table on a page here are the
>> > following things which a non sighted user is missing given that
>> > caption:
>> >
>> > 1. What table is this? If there are 5 tables on a page and the user
>> > is using a screen reader to navigate through the list of tables, the
>> > user would not know which table they are focusing on.
>> > 2. The caption tells the non sighted user that there are 10 items
>> > (which it should really say there are 10 rows). But a sighted user
>> > can see that this table is set to display at most 10 rows per page.
>> > The sighted user can also see that there are at least 4 pages (so
>> > there are at most 49 rows to the table in total) 3. The non sighted
>> > user does not know that individual rows can be selected and/or have
>> > an action performed on individual rows (edited in this example)
>> >
>> > I'm thinking that an example of a better caption might be:
>> >
>> > Below is a table of Visualization information displaying 10 rows of
>> > the table. There are 49 rows in total for the table and the table is
>> > currently set to display 10 rows per page with a page indicator
>> > which can be used to navigate to any page of data in the table.
>> > Individual or all rows in the table can be selected and each row in
>> > the table can be
>> edited.
>> >
>> >
>> > Alternatively if it is desired to keep the caption short and
>> > concise, the caption could simply be the name of the table:
>> >
>> > <caption class="ScreenReaderOnly">A Simple Table</caption>
>> >
>> > and an aria-describedby attribute could give the additional details
>> > of the table.
>> >
>> > <div id="ASimpleTableSummary">
>> >
>> > Table is displaying page 1 of 4 and has 10 rows per page.
>> >
>> > There is a page navigation control as well as a control to display
>> > 10, 20, or 50 rows per page.
>> >
>> > Rows can be selected for deletion with a checkbox in the first colum
>> > or editing by clicking on the action control in the last column of
>> > the
>> row.
>> >
>> > </div>
>> >
>> >
>> > <table class="Table-responsive"
>> > aria-describedby="ASimpleTableSummary">
>> >
>> > Rest of table markup
>> >
>> > </table>
>> >
>> > The table navigation element (page breadcrumb list) exist outside of
>> > each individual table but should be contained within a `nav` tag:
>> >
>> > <nav>Table Paging Breadcrumbs</nav>
>> >
>> > ( Rows per page is not strictly a navigation element, it's a simple
>> > select input tag )
>> >
>> > I believe the above approach would give a screenreader user the same
>> > information about the "look and feel" of any given table as a non
>> > screenreader user without them having to navigate around the table
>> > to find out what's there.
>> >
>> > Any thoughts from anyone out there? Does anyone have any easy method
>> > of getting to the controls of a table such as the one described
>> >
>> > Thanks
>> > *Mike Barlow*
>> > Development Manager
>> > Web Accessibility/Section 508 SME
>> >
>> > Lancaster, Pa 17601
>> > Office: 732.835-7557
>> > Cell: 732.682.8226
>> > e-mail: <EMAIL REMOVED>
>> >
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.