WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Travel Live departures and tables (Andrew Brandwood)

for

From: Brandon Keith Biggs
Date: May 16, 2016 9:50AM

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