WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Question on a caption for Accessible Tables with Navigation

for

From: Mike Barlow
Date: Sep 14, 2019 8:32AM

--000000000000c387510592843ef2
Content-Type: text/plain; charset="UTF-8"

Thank Birkir

I was originally going by some thoughts from the WAI Caption & Summary
article <https://www.w3.org/WAI/tutorials/tables/caption-summary/> which
talked about having a description in the caption. Though I think the second
approach in that article (using aria-describedby to provide a table
summary) might be better.

The example table I showed was simpler than any of the tables in the app
I'm reviewing. And in general there are multiple tables on each page of the
app.

So I was trying to come up with an approach that would provide a user
requiring a screenreader to be able to quickly "see" what the table is all
about.

Perhaps this might be a better example (and thanks for the suggestions you
gave, they did remind me to make better use of the aria-label)

The caption only contains the "name" of the table.
There's an aria-describedby to provide a summary of the table and it's
controls
The controls are labeled to associate them with the table

*A simple table with accessible controls*
[image: ASimpleTableExample.png]

*Table summary for an aria-describedby*

<div class="ScreenReaderOnly" id="MySimpleTable">

There are 49 rows in total for the table

There is a rows per page control for the table

There is a breadcrumb navigator to access any page of data in the table.

Individual or all rows in the table can be selected

There is an action control for each row in the table.

</div>


*The Table*

<table aria-describedby="MySimpleTable">

<caption class="ScreenReaderOnly">My Simple Table</caption>

<tr>

<th scope="col"><input aria-label="select all" type="checkbox"></th>

<th scope="col">Name</th>

<th scope="col">Address</th>

<th scope="col">Description</th>

<th scope="col">Action</th>

</tr>

<tr>

<td><input aria-label="select row 1" type="checkbox"></td>

<th scope="row" class="rowscope">Name 1</th>

<td>Address 1</td>

<td>Something about this </td>

<td><button aria-label="edit Name 1 row">.</button></td>

</tr>

*... More Rows ...*

</table>

*The Controls*

<label aria-label="My Simple Table Rows Per Page">Rows per page: <select>

<option>10 rows</option><option>20 Rows</option><option>50 Rows</option>

</select></label>

<nav aria-label="My Simple Table breadcrumbs">

<a aria-label="Show page 1 of the table" href="#">1</a>

<a aria-label="Show page 2 of the table" href="#">2</a>

<a aria-label="Show page 3 of the table" href="#">3</a>

<a aria-label="Show page 4 of the table" href="#">4</a>

</nav>


Complete HTML file attached
*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 Fri, Sep 13, 2019 at 11:14 PM Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

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

--000000000000c387510592843ef2
Content-Type: image/png; name="ASimpleTableExample.png"
Content-Disposition: inline; filename="ASimpleTableExample.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_k0jn304n0>
X-Attachment-Id: ii_k0jn304n0

iVBORw0KGgoAAAANSUhEUgAAAXMAAAC1CAMAAACaou+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACx
jwv8YQUAAAMAUExURQAAAAAASgAAUlIAAFIAUlJVAGtMAEdHR1JVUgAAhAAA7gAA7wAA8QBVhABV
pQB0sQBV8lIAhFJVhFJVpVJV8gCChACCxgCC9VKChFKmpVKms1KCxlKC9VKm51Km94QAAIQAUoRV
AKVVAKVVUoQAhIQA7oQA74QA8YRVpaVVhKVV7qVV8YSCAKWCAISCUpWUUqWCUqWmUsaCAMaCUs+U
SdGmUuemUoSChJOTk5SUlJWVlZeXl5iYmJmZmZqampubm5ycnJ2dnZ6enp+fn4SmpaWCpaWmhKGh
oaKioqOjo6SkpKWlpaampqqqqqysrLGxsbKysrS0tLe3t7m5uYSCxoSC9YSmxoSm56WmxqWm56Wm
76XHpaXKpYTHxoTH54TH/6XH/6XjxqXj56Xj/8aChMampeemhOempcaC7saC78aC8eem7+em8cbH
hMbjpefHhP/HhP/Hpf/jpcDAwMHBwcfHx8jIyM3NzdXV1dzc3N7e3t/f38bH/8b/xsb/58b////H
8f/H8ufjxuf/xv//xuDg4OLi4uPj4+fj5+Tk5OXl5ebm5ufn5+jo6Orq6uvr6+zs7O3t7e7u7u/v
7+f/5+f////j5//j8v/j9///5/Hx8fLy8vPz8/X19fb29vf39///9f//9////wAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFQqjcAAAAJcEhZcwAADsMA
AA7DAcdvqGQAABM8SURBVHhe7Z2Ln2M3dceHGWiYbZmWBqZJ6XRgCKWkQFun9ZaEN9mER3iEBEIK
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
--000000000000c387510592843ef2--