E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 9 (In chronological order)

From: Mike Barlow
Date: Fri, Sep 13 2019 4:28PM
Subject: Question on a caption for Accessible Tables with Navigation
No previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Fri, Sep 13 2019 9:14PM
Subject: Re: Question on a caption for Accessible Tables with Navigation
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
>


--
Work hard. Have fun. Make history.

From: Mike Barlow
Date: Sat, Sep 14 2019 8:32AM
Subject: Re: Question on a caption for Accessible Tables with Navigation
← Previous message | Next message →

--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 ADDRESS REMOVED =


On Fri, Sep 13, 2019 at 11:14 PM Birkir R. Gunnarsson <
= EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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--

From: mhysnm1964@gmail.com
Date: Sun, Sep 15 2019 12:12AM
Subject: Re: Question on a caption for Accessible Tables with Navigation
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of
Birkir R. Gunnarsson
Sent: Saturday, 14 September 2019 1:14 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>


--
Work hard. Have fun. Make history.
http://webaim.org/discussion/archives

From: Mike Barlow
Date: Sun, Sep 15 2019 7:03AM
Subject: Re: Question on a caption for Accessible Tables with Navigation
← Previous message | Next message →

@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.html>)
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 ADDRESS REMOVED =


On Sun, Sep 15, 2019 at 2:12 AM < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Saturday, 14 September 2019 1:14 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >
>
>
> --
> Work hard. Have fun. Make history.
> > > at
> http://webaim.org/discussion/archives
> >
> > > > >

From: mhysnm1964@gmail.com
Date: Sun, Sep 15 2019 4:54PM
Subject: Re: Question on a caption for Accessible Tables with Navigation
← Previous message | Next message →

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 ADDRESS REMOVED = > On Behalf Of Mike
Barlow
Sent: Sunday, 15 September 2019 11:04 PM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =


On Sun, Sep 15, 2019 at 2:12 AM < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Saturday, 14 September 2019 1:14 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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

From: Birkir R. Gunnarsson
Date: Mon, Sep 16 2019 5:15PM
Subject: Re: Question on a caption for Accessible Tables with Navigation
← Previous message | Next message →

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 ADDRESS REMOVED = < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of Mike
> Barlow
> Sent: Sunday, 15 September 2019 11:04 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>
> On Sun, Sep 15, 2019 at 2:12 AM < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Saturday, 14 September 2019 1:14 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.

From: Praunicorn
Date: Tue, Sep 17 2019 12:17AM
Subject: Re: Question on a caption for Accessible Tables withNavigation
← Previous message | Next message →

Hi All,

I am new to Accessibility testing , Can any body guide me how to start testing with screen readers.

Best Regards,
Unicorn

Sent from Mail for Windows 10

From: Birkir R. Gunnarsson
Sent: Tuesday, September 17, 2019 4:45 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Question on a caption for Accessible Tables withNavigation

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 ADDRESS REMOVED = < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of Mike
> Barlow
> Sent: Sunday, 15 September 2019 11:04 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>
> On Sun, Sep 15, 2019 at 2:12 AM < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Saturday, 14 September 2019 1:14 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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.

From: Mike Barlow
Date: Tue, Sep 17 2019 2:13PM
Subject: Re: Question on a caption for Accessible Tables with Navigation
← Previous message | No next message

Thanks Birkir, that aria-details may be the perfect thing.

On Mon, Sep 16, 2019, 7:15 PM Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> 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 ADDRESS REMOVED = < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Mike
> > Barlow
> > Sent: Sunday, 15 September 2019 11:04 PM
> > To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >
> >
> > On Sun, Sep 15, 2019 at 2:12 AM < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> >> Birkir R. Gunnarsson
> >> Sent: Saturday, 14 September 2019 1:14 PM
> >> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >> >
> >>
> >>
> >> --
> >> Work hard. Have fun. Make history.
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > >
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >