WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Travel Live departures and tables (Andrew Brandwood)

for

From: Gauvreau, Jennifer (CGI Federal)
Date: May 17, 2016 9:39AM

Hi Andrew,

The problem Brandon described below is related to a known bug when the <caption> element is visually hidden off-screen with CSS. The bug is filed with NVDA (http://community.nvda-project.org/ticket/3813) and Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id™5888 and https://bugzilla.mozilla.org/show_bug.cgi?id01795) but the origin of the problem lies with Firefox and based on the Bugzilla bugs it hasn't been resolved yet.

As a workaround, move the "u-visually-hidden" class you're using to visually hide the caption out of the <caption> element and instead put it on a <span> element nested inside of the <caption>.

For example:
<table class="live-travel-board__table" aria-labelledby="LiveTravelBoadTitle">
<caption class="live-travel-board__caption">
<span class="u-visually-hidden">Live departures for
<span class="live-travel-board__title-station">Birmingham New Street</span>
</span>
</caption>
<thead class="live-travel-board__header">
<tr>...

Jennifer Gauvreau, CUA
Director, Consulting Services
Human Factors Practice
CGI
12601 Fair Lakes Circle, Fairfax, VA 22033
T: 703-227-6167
M: 571-606-4973
<EMAIL REMOVED>
CONFIDENTIALITY NOTICE: Proprietary/Confidential Information belonging to CGI Group Inc. and its affiliates may be contained in this message. If you are not a recipient indicated or intended in this message (or responsible for delivery of this message to such person), or you think for any reason that this message may have been addressed to you in error, you may not use or copy or deliver this message to anyone else. In such case, you should destroy this message and are asked to notify the sender by reply e-mail.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Andrew Brandwood
Sent: Tuesday, May 17, 2016 4:02 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)

OK cool,

I will revise to see how I can improve it.

Cheers
Andrew


ANDREW BRANDWOOD

HEAD OF FRONTEND DEVELOPMENT
-

CODECOMPUTERLOVE.COM <http://www.codecomputerlove.com/>;
@COMPUTERLOVERS <http://twitter.com/computerlovers>;
+44 (0)161 276 2080

SEVENDALE HOUSE,
DALE STREET,
MANCHESTER, M1 1JB.

REGISTERED IN ENGLAND NO: 3759526

On 16/05/2016, 16:50, "WebAIM-Forum on behalf of Brandon Keith Biggs" < <EMAIL REMOVED> on behalf of <EMAIL REMOVED> > wrote:

>Hello,
>First thought with Firefox and NVDA:
>When trying to down arrow from the title cell to the first row of content,
>I am not able to. It says end of table.
>
>Same happens when trying to go down from "Live departures for Birmingham
>New Street". I press ctrl+alt+down arrow and it says "not in a table cell".
>So I don't like that. Is there a way to make the title invisible but just
>announce when I press t to go to it? I also prefer the heading to say the
>stop.
>
>When pressing t to jump to the table, NVDA just reads "Live departures
>for". So I would just put "Birmingham New Street" as the table title.
>
>On the links I see: "See details on departure to Bristol Temple MeadsSee
>details". Why does it say "see details" twice?
>Thanks,
>
>
>Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>
>On Mon, May 16, 2016 at 2:54 AM, Andrew Brandwood <
> <EMAIL REMOVED> > wrote:
>
>> OK, I have put together an quick example of some markup with a bit of
>> styling
>>
>> http://www.brandwood.com/live-travel-board.html
>>
>>
>> This is a responsive example so I have tried to mark up the table with the
>> correct hidden and visually hidden styles.
>>
>> Any thoughts on how this works would be much appreciated
>>
>> Cheers
>> Andrew
>>
>>
>>
>>
>>
>> ANDREW BRANDWOOD
>>
>> HEAD OF FRONTEND DEVELOPMENT
>> -
>>
>> CODECOMPUTERLOVE.COM <http://www.codecomputerlove.com/>;
>> @COMPUTERLOVERS <http://twitter.com/computerlovers>;
>> +44 (0)161 276 2080
>>
>> SEVENDALE HOUSE,
>> DALE STREET,
>> MANCHESTER, M1 1JB.
>>
>> REGISTERED IN ENGLAND NO: 3759526
>>
>>
>>
>>
>>
>>
>>
>>
>> On 13/05/2016, 16:23, "WebAIM-Forum on behalf of Mike Barlow" <
>> <EMAIL REMOVED> on behalf of <EMAIL REMOVED> >
>> wrote:
>>
>> >Dang, I never thought of using the "Aria-LabelledBy" I've historically
>> been
>> >keeping to the standard html tags and attributes but do like the ARIA
>> >roles, just have to get more used to using them!
>> >
>> >*Mike Barlow*
>> >Web Application Developer
>> >Web Accessibility/Section 508 SME
>> >
>> >Lancaster, Pa 17601
>> >Office: 732.835-7557
>> >Cell: 732.682.8226
>> >e-mail: <EMAIL REMOVED>
>> >
>> >On Thu, May 12, 2016 at 7:23 PM, Birkir R. Gunnarsson <
>> > <EMAIL REMOVED> > wrote:
>> >
>> >> You can use a heading as the accessible name for a table.
>> >>
>> >> <h2 id=tr1">Train x</h2>
>> >> <table aria-labelledby="tr1">
>> >> ...
>> >> </table>
>> >> Pretty well supported across assistive technologies.
>> >>
>> >>
>> >>
>> >> On 5/12/16, Mike Barlow < <EMAIL REMOVED> > wrote:
>> >> > That's true, I was originally thinking that could be done, but after
>> >> > running a quick test through HTML Tidy I decided against it...
>> >> >
>> >> > Tidy puts out a warning...
>> >> > 2 Warning: missing </caption> before <h2>; Warning: <h2> isn't
>> allowed in
>> >> > <table> elements; Warning: discarding unexpected </caption>; Warning:
>> >> > trimming empty <caption>
>> >> > <caption><h2>FooBar</h2></caption>
>> >> >
>> >> >
>> >> > Though, according to the spec the caption tag CAN contain "flow
>> content":
>> >> > https://www.w3.org/TR/html-markup/caption.html
>> >> >
>> >> > So that's "probably" a good way to go
>> >> >
>> >> > *Mike Barlow*
>> >> > Web Application Developer
>> >> > Web Accessibility/Section 508 SME
>> >> >
>> >> > Lancaster, Pa 17601
>> >> > Office: 732.835-7557
>> >> > Cell: 732.682.8226
>> >> > e-mail: <EMAIL REMOVED>
>> >> >
>> >> > On Thu, May 12, 2016 at 1:20 PM, Jim Allan < <EMAIL REMOVED> >
>> wrote:
>> >> >
>> >> >> It is valid to use headings inside caption
>> >> >> <caption><h3>Trains departing Podunk</h3></caption>
>> >> >> then the table shows in either list.
>> >> >>
>> >> >>
>> >> >> On Thu, May 12, 2016 at 11:00 AM, Brandon Keith Biggs <
>> >> >> <EMAIL REMOVED> > wrote:
>> >> >>
>> >> >> > Hello,
>> >> >> > Do both, headings are nice if you do a find in the page for your
>> >> train.
>> >> >> > Thanks,
>> >> >> >
>> >> >> >
>> >> >> > Brandon Keith Biggs <http://brandonkeithbiggs.com/>;
>> >> >> >
>> >> >> > On Thu, May 12, 2016 at 7:45 AM, Mike Barlow < <EMAIL REMOVED> >
>> >> wrote:
>> >> >> >
>> >> >> > > David, I agree that captions should be available for all tables
>> >> >> > > (that's
>> >> >> > > just part of good table design along with scopes), but mightn't a
>> >> user
>> >> >> > find
>> >> >> > > it easier to "scroll" through the headings than through table
>> >> >> > > captions?
>> >> >> > >
>> >> >> > > *Mike Barlow*
>> >> >> > > Web Application Developer
>> >> >> > > Web Accessibility/Section 508 SME
>> >> >> > >
>> >> >> > > Lancaster, Pa 17601
>> >> >> > > Office: 732.835-7557
>> >> >> > > Cell: 732.682.8226
>> >> >> > > e-mail: <EMAIL REMOVED>
>> >> >> > >
>> >> >> > > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
>> >> >> > > <EMAIL REMOVED> > wrote:
>> >> >> > >
>> >> >> > > > Thank you David,
>> >> >> > > >
>> >> >> > > > I have literally just added a caption to the table along with
>> the
>> >> >> > > relevant
>> >> >> > > > scope for headings :)
>> >> >> > > >
>> >> >> > > > Cheers
>> >> >> > > > Andrew
>> >> >> > > >
>> >> >> > > >
>> >> >> > > >
>> >> >> > > > ANDREW BRANDWOOD
>> >> >> > > >
>> >> >> > > > HEAD OF FRONTEND DEVELOPMENT
>> >> >> > > > -
>> >> >> > > >
>> >> >> > > > CODECOMPUTERLOVE.COM <http://www.codecomputerlove.com/>;
>> >> >> > > > @COMPUTERLOVERS <http://twitter.com/computerlovers>;
>> >> >> > > > +44 (0)161 276 2080
>> >> >> > > >
>> >> >> > > > SEVENDALE HOUSE,
>> >> >> > > > DALE STREET,
>> >> >> > > > MANCHESTER, M1 1JB.
>> >> >> > > >
>> >> >> > > > REGISTERED IN ENGLAND NO: 3759526
>> >> >> > > >
>> >> >> > > >
>> >> >> > > >
>> >> >> > > >
>> >> >> > > >
>> >> >> > > >
>> >> >> > > >
>> >> >> > > >
>> >> >> > > > On 12/05/2016, 15:12, "WebAIM-Forum on behalf of David
>> Farough" <
>> >> >> > > > <EMAIL REMOVED> on behalf of
>> >> >> > > > <EMAIL REMOVED> > wrote:
>> >> >> > > >
>> >> >> > > > >Hi Andrew:
>> >> >> > > > >Instead of headings before the tables, I would recommend
>> coding
>> >> the
>> >> >> > > > >caption for the table.
>> >> >> > > > >
>> >> >> > > > >This way when a user moves to the table, they will get the
>> >> caption
>> >> >> for
>> >> >> > > > >the table first. Screen reader users can move from one table
>> to
>> >> >> > another
>> >> >> > > > >using quick navigation keys. they can also list the tables
>> on a
>> >> >> page.
>> >> >> > > > >the caption for the table will be included in this list. This
>> >> >> > > > > makes
>> >> >> > for
>> >> >> > > > >very efficient navigation.
>> >> >> > > > >
>> >> >> > > > >David Farough
>> >> >> > > > >
>> >> >> > > > >Coordonnateur de l'accessibilité des applications, Services
>> >> >> > > > > intégrés
>> >> >> > de
>> >> >> > > > >gestion des TI
>> >> >> > > > >Commission de la fonction publique du Canada / Gouvernement du
>> >> >> Canada
>> >> >> > > > > <EMAIL REMOVED> Tél: 819-420-8418 Télécopieur :
>> >> >> > > > >819-420-8408
>> >> >> > > > >
>> >> >> > > > >Application Accessibility Co-ordinator, Corporate IT
>> Management
>> >> >> > > > >Public Service Commission of Canada / Government of Canada
>> >> >> > > > > <EMAIL REMOVED> Tel: 819-420-8418 / Fax:
>> >> 819-420-8408
>> >> >> > > > >
>> >> >> > > > >
>> >> >> > > > >>>> Mike Barlow < <EMAIL REMOVED> > 09:13 AM Thursday, May
>> 12,
>> >> 2016
>> >> >> > > > >>>>
>> >> >> > > > >Andrew, depending on how big your schedule is yes a table
>> within
>> >> a
>> >> >> > > > >list
>> >> >> > > > >probably would get too confusing (if your table is small and
>> the
>> >> >> list
>> >> >> > > > >small). However, if you're doing a single page with lots of
>> >> >> different
>> >> >> > > > >trains you might want to consider doing something like using a
>> >> >> heading
>> >> >> > > > >(like an H2) for each train and then a table for the schedule
>> for
>> >> >> that
>> >> >> > > > >train. I've found that individuals who use screen readers
>> tend to
>> >> >> like
>> >> >> > > > >to
>> >> >> > > > >go through the headings to find areas on a page to review
>> then a
>> >> >> table
>> >> >> > > > >within each heading makes it easy to browse.
>> >> >> > > > >
>> >> >> > > > >
>> >> >> > > > >
>> >> >> > > > >
>> >> >> > > > >
>> >> >> > > > >Ce courriel est destiné exclusivement au destinataire
>> mentionné
>> >> en
>> >> >> > titre
>> >> >> > > > >et peut contenir de l'information privilégiée, confidentielle
>> ou
>> >> >> > > > >soustraite à la communication aux termes des lois applicables.
>> >> >> > > > > Toute
>> >> >> > > > >divulgation non autorisée, toute reproduction ou
>> réacheminement
>> >> est
>> >> >> > > > >interdit. Si vous n'êtes pas le destinataire de ce courriel,
>> ou
>> >> >> n'êtes
>> >> >> > > > >pas autorisé par le destinataire visé, ou encore, si vous
>> l'avez
>> >> >> reçu
>> >> >> > > > >par erreur, veuillez le mentionner immédiatement à
>> l'expéditeur
>> >> et
>> >> >> > > > >supprimer le courriel et les copies.
>> >> >> > > > >
>> >> >> > > > >This e-mail message is intended for the named recipient(s) and
>> >> may
>> >> >> > > > >contain information that is privileged, confidential and/or
>> >> exempt
>> >> >> > from
>> >> >> > > > >disclosure under applicable law. Unauthorized disclosure,
>> copying
>> >> >> > > > > or
>> >> >> > > > >re-transmission is prohibited. If you are not a named
>> recipient
>> >> or
>> >> >> not
>> >> >> > > > >authorized by the named recipient(s), or if you have received
>> >> this
>> >> >> > > > >e-mail in error, then please notify the sender immediately and
>> >> >> delete
>> >> >> > > > >the message and any copies.
>> >> >> > > > >
>> >> >> > > > >>> >> >> > > > >>> >> >> > > > >>> >> >> > > > >>> >> >> > > > >> >> >> > > > >> >> >> > > > >> >> >> > > > >> >> >> > > >
>> >> >> > > >> >> >> > > >> >> >> > > >> >> >> > > >> >> >> > >
>> >> >> > >> >> >> > >> >> >> > >> >> >> > >> >> >> >
>> >> >>
>> >> >>
>> >> >>
>> >> >> --
>> >> >> 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
>> >> >> >> >> >> >> >> >> >> >> >> >> >> >>
>> >> > >> >> > >> >> > >> >> > >> >> >
>> >>
>> >>
>> >> --
>> >> Work hard. Have fun. Make history.
>> >> >> >> >> >> >> >> >> >>
>> >>> >>> >>> >>> >> >> >> >>
>>>>