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 17, 2019 2:13PM

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

On Mon, Sep 16, 2019, 7:15 PM Birkir R. Gunnarsson <
<EMAIL 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 REMOVED> < <EMAIL 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 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
> >> > >>
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > >
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >