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 4:54PM

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


On Sun, Sep 15, 2019 at 2:12 AM < <EMAIL 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 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.
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >
http://webaim.org/discussion/archives