E-mail List Archives

Search E-mail List Archives for

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

From: Levon Spradlin
Date: Thu, Jan 12 2017 2:25PM
Subject: Alternative Descriptions for Complex Tables
No previous message | Next message →

I have a question about best practices for tables in HTML content. In PDFs,
we can tag them with descriptive text. When tables in web content become
too complex for screen reader users to navigate easily, what is the best
solution for providing an alternative description? I was thinking that
either before or after the table in page text, but I'm curious what others
have done.

cheers,
Levon

From: Beranek, Nicholas
Date: Thu, Jan 12 2017 2:30PM
Subject: Re: Alternative Descriptions for Complex Tables
← Previous message | Next message →

Hi Levon,

I would recommend at the very least a <caption> element that provides a very brief description of the table. I'm curious to hear about the use of the "summary" attribute on <table> versus "aria-label" or "aria-labelledby". Historically, we've used the "summary" attribute to provide a long description.

Nick

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Levon Spradlin
Sent: Thursday, January 12, 2017 4:26 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Alternative Descriptions for Complex Tables

I have a question about best practices for tables in HTML content. In PDFs, we can tag them with descriptive text. When tables in web content become too complex for screen reader users to navigate easily, what is the best solution for providing an alternative description? I was thinking that either before or after the table in page text, but I'm curious what others have done.

cheers,
Levon
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.

From: Birkir R. Gunnarsson
Date: Thu, Jan 12 2017 2:48PM
Subject: Re: Alternative Descriptions for Complex Tables
← Previous message | Next message →

You can make fairly complex tables accessible with standard table markup.
Screen reader support for header cells spanning multiple columns is
pretty decent (Voiceover being the exception, at least last time I
tested).
Make sure to use scope="colgroup" and colspan="correct number of columns).
For some strange reason support for header cell spanning multiple rows
is almost non-existent.
If your tables get so complex that header cells spanning multiple
columns/rows is not enough, you may honestly want to consider breaking
them up or simplify them, not just for screen readers but for all
users.
That being said.
I believe that if you have aria-labelledby, aria-label or caption they
should be announced as the table's accessible name, while the value of
the summary attribute would be announced as the tables accessible
description.
You could also use aria-describedby pointing to the id of an element
whose text describes the table (I need to test support for this).
There is a new attribute in the ARIA 1.1 spec, aria-details, that sold
point to visible information about an image (or table) and screen
readers should offer a keyboard shortcut to jump there straight from
the table.
However this attribute is not supported anywhere yet, as far as I know.



On 1/12/17, Beranek, Nicholas < = EMAIL ADDRESS REMOVED = > wrote:
> Hi Levon,
>
> I would recommend at the very least a <caption> element that provides a very
> brief description of the table. I'm curious to hear about the use of the
> "summary" attribute on <table> versus "aria-label" or "aria-labelledby".
> Historically, we've used the "summary" attribute to provide a long
> description.
>
> Nick
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf
> Of Levon Spradlin
> Sent: Thursday, January 12, 2017 4:26 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Alternative Descriptions for Complex Tables
>
> I have a question about best practices for tables in HTML content. In PDFs,
> we can tag them with descriptive text. When tables in web content become too
> complex for screen reader users to navigate easily, what is the best
> solution for providing an alternative description? I was thinking that
> either before or after the table in page text, but I'm curious what others
> have done.
>
> cheers,
> Levon
> > > http://webaim.org/discussion/archives
> > >
> The information contained in this e-mail is confidential and/or proprietary
> to Capital One and/or its affiliates and may only be used solely in
> performance of work or services for Capital One. The information transmitted
> herewith is intended only for use by the individual or entity to which it is
> addressed. If the reader of this message is not the intended recipient, you
> are hereby notified that any review, retransmission, dissemination,
> distribution, copying or other use of, or taking of any action in reliance
> upon this information is strictly prohibited. If you have received this
> communication in error, please contact the sender and delete the material
> from your computer.
> > > > >


--
Work hard. Have fun. Make history.

From: Jim Allan
Date: Thu, Jan 12 2017 3:29PM
Subject: Re: Alternative Descriptions for Complex Tables
← Previous message | Next message →

I like and use explanatory info in the para(s) before the table.
<p> in the table below ....</p>
if you think its too complicated for screen reader users to read, likely
other users will have problems making sense of the table also.
making the explanatory information available to all is good for all.
you can add the other stuff mentioned to help make the table more
navigable...but a good overview is always a great start to making sense of
a table.

Jim

On Thu, Jan 12, 2017 at 3:25 PM, Levon Spradlin < = EMAIL ADDRESS REMOVED = >
wrote:

> I have a question about best practices for tables in HTML content. In PDFs,
> we can tag them with descriptive text. When tables in web content become
> too complex for screen reader users to navigate easily, what is the best
> solution for providing an alternative description? I was thinking that
> either before or after the table in page text, but I'm curious what others
> have done.
>
> cheers,
> Levon
> > > > >



--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964

From: Graham Armfield
Date: Tue, Jan 17 2017 6:32AM
Subject: Re: Alternative Descriptions for Complex Tables
← Previous message | Next message →

Whilst I'm sure it's still supported in most browsers, the summary
attribute on <table> element is deprecated now I believe.

Regards
Graham Armfield

From: _mallory
Date: Wed, Jan 18 2017 6:11AM
Subject: Re: Alternative Descriptions for Complex Tables
← Previous message | No next message

Yeah that deprecation bugs me because its purpose was to give a quick
idea of the table structure textually, something a visual user can do
themselves (columns contain Senators and rows represent cups of coffee
drank, etc). But it wasn't right to use summary to actually summarise
the table.
I'm also often using an element like a p afterwards stating the general
gist of the table, also with charts and graphs.

cheers,
_mallory

On Tue, Jan 17, 2017 at 01:32:06PM +0000, Graham Armfield wrote:
> Whilst I'm sure it's still supported in most browsers, the summary
> attribute on <table> element is deprecated now I believe.
>
> Regards
> Graham Armfield
> > > >