WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Travel Live departures and tables (Andrew Brandwood)

for

From: Andrew Brandwood
Date: May 17, 2016 2:02AM

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