WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Travel Live departures and tables (Andrew Brandwood)

for

From: Andrew Brandwood
Date: May 16, 2016 3:54AM

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