WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Question on a caption for Accessible Tables with Navigation

for

From: mhysnm1964@gmail.com
Date: Sep 15, 2019 12:12AM

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.
http://webaim.org/discussion/archives