WebAIM - Web Accessibility In Mind

E-mail List Archives

Question on a caption for Accessible Tables with Navigation

for

From: Mike Barlow
Date: Sep 13, 2019 4:28PM

--0000000000003766e6059276c730
Content-Type: text/plain; charset="UTF-8"

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>

--0000000000003766e6059276c730
Content-Type: image/png; name="ASimpleTable.png"
Content-Disposition: inline; filename="ASimpleTable.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_k0ip07lq0>
X-Attachment-Id: ii_k0ip07lq0

iVBORw0KGgoAAAANSUhEUgAAAW0AAAELCAMAAAAlcidXAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
jwv8YQUAAAMAUExURQAAAAAALQAAMAAAOwA7OzsAADsAOzs7ACAgIDAwMAAAVQAAcAA7cDsAcDs7
cABwcDtwcFwAAHAAAHAAO3A7AHA7O3AAcHBwAHBwO1paWnBwcAAwggAwgwA7mzs7mwBwmwBwvjtw
mztwvgBmzABm0QBm1gB/3Dt/3FwxhHA7m3Bwm3BwvnBmzHBm0XBm1jubmzubvgCX4zCDyzGEyzub
3DuX4zus7XCbvnC+vnCb3HCX43C+3Hq83HC+/3DB/5s7AJs7O5s7cJtwAJtwO6dbAKhcAL5wALp5
LLx6Lb5wO7l3d75wcJtwm5t/zJt/1pubO76bO5ubcL6+cNybO9ybcNy+cOunW+2oXP++cJubm5ub
vr6bm6uts5ub3Jus0Zu+/76XzL6X0b6X1pvcvr7cm5nY2Jva2pvc3ILJ64LK7JvB/5va/5vc/77/
3L7//9ybm9y+m/++m9ys0dys1tzcm9z/vv/cm+3tqO7uqf//vtDQ0NHR0dLS0tPT09TU1NbW1tjY
2NnZ2dra2tzc3N7e3t/f39z/3Mnr68rs7Mvt7cvu7tz////B1v/B3P/a3P/c3P/a7f//3OHh4eLi
4uXl5ebm5ufn5+np6erq6uvr6+zs7O3t7e7u7u/v7///4///7fDw8PHx8fLy8v///wAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGC+bO4AAAAJcEhZcwAADsMA
AA7DAcdvqGQAABR9SURBVHhe7ZqLn+REEcdH1gP0RHRPBRcXVs4XouJjVVCXBR+jqCjngoziCYpv
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
--0000000000003766e6059276c730--