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 13, 2019 9:14PM

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.