E-mail List Archives

Search E-mail List Archives for

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

From: Andrew Brandwood
Date: Wed, May 11 2016 12:52PM
Subject: Travel Live departures and tables (Andrew Brandwood)
No previous message | Next message →

Hi all,

I am currently working on a large rail network provider's group of websites. I am interested in opinion on how best to mark up the HTML for assistive technologies for live departures and arivals.

I have seen many different methods, but none are conclusive. If anyone as any feedback on what works best or is the worst experience you have encountered I would much appreciate any input.

Currently I am considering one of the following

A.) Table
B.) Ordered list
C.) A combination of the two. A list with a table nested.

In the table would be headings of arrival time, destination, platform, further details.

Any help on best practice or things to avoid in this instance would be much appreciated.

Kind regards
Andrew



ANDREW BRANDWOOD
HEAD OF FRONT END 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

From: Mike Barlow
Date: Wed, May 11 2016 1:05PM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

Well I would think that, since you're creating a "table of arrivals and
departures" that a (properly encoded with proper scoping of course) would
be the best course of action.
But you mention "live" will this be a page that will constantly be changing
(via JS updating the DOM directly) or would the user have to do a page
refresh to see any changes.
If the former, then I would also make use of ARIA Live Regions, that would
inform the user when any content changes


*Mike Barlow*
Web Application Developer
Web Accessibility/Section 508 SME

Lancaster, Pa 17601
Office: 732.835-7557
Cell: 732.682.8226
e-mail: = EMAIL ADDRESS REMOVED =

On Wed, May 11, 2016 at 2:52 PM, Andrew Brandwood <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi all,
>
> I am currently working on a large rail network provider's group of
> websites. I am interested in opinion on how best to mark up the HTML for
> assistive technologies for live departures and arivals.
>
> I have seen many different methods, but none are conclusive. If anyone as
> any feedback on what works best or is the worst experience you have
> encountered I would much appreciate any input.
>
> Currently I am considering one of the following
>
> A.) Table
> B.) Ordered list
> C.) A combination of the two. A list with a table nested.
>
> In the table would be headings of arrival time, destination, platform,
> further details.
>
> Any help on best practice or things to avoid in this instance would be
> much appreciated.
>
> Kind regards
> Andrew
>
>
>
> ANDREW BRANDWOOD
> HEAD OF FRONT END 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
> > > > >

From: Andrew Brandwood
Date: Thu, May 12 2016 12:51AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

Hi Mike,

Thanks for your reply. I guess that is my question. Should I create a table or a list. I am not visually impaired myself so looking at the results I can interperet them in anyway that is easiest to me. Be that a list of results or a table.

I will be marking up which ever direction I take in the correct markup and applying aria live where appropriate.

I have seen this data written in html in many different ways.

I guess I'm asking which works best for people using assistive tech. I imagine a table within a list would get confusing, but I am only presuming.

Rather than presuming I'd prefer to get it right and usable.

Cheers
Andrew


From: Mike Barlow < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Sent: Wednesday, May 11, 2016 8:05 pm
Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>


Well I would think that, since you're creating a "table of arrivals and
departures" that a (properly encoded with proper scoping of course) would
be the best course of action.
But you mention "live" will this be a page that will constantly be changing
(via JS updating the DOM directly) or would the user have to do a page
refresh to see any changes.
If the former, then I would also make use of ARIA Live Regions, that would
inform the user when any content changes


*Mike Barlow*
Web Application Developer
Web Accessibility/Section 508 SME

Lancaster, Pa 17601<x-apple-data-detectors://6/0>
Office: 732.835-7557
Cell: 732.682.8226<tel:732.682.8226>
e-mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >

On Wed, May 11, 2016 at 2:52 PM, Andrew Brandwood <
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> wrote:

> Hi all,
>
> I am currently working on a large rail network provider's group of
> websites. I am interested in opinion on how best to mark up the HTML for
> assistive technologies for live departures and arivals.
>
> I have seen many different methods, but none are conclusive. If anyone as
> any feedback on what works best or is the worst experience you have
> encountered I would much appreciate any input.
>
> Currently I am considering one of the following
>
> A.) Table
> B.) Ordered list
> C.) A combination of the two. A list with a table nested.
>
> In the table would be headings of arrival time, destination, platform,
> further details.
>
> Any help on best practice or things to avoid in this instance would be
> much appreciated.
>
> Kind regards
> Andrew
>
>
>
> ANDREW BRANDWOOD
> HEAD OF FRONT END DEVELOPMENT
> -
>
> CODECOMPUTERLOVE.COM<http://codecomputerlove.com>;<http://www.codecomputerlove.com/>;
> @COMPUTERLOVERS<http://twitter.com/computerlovers>;
> +44 (0)161 276 2080<tel:+44%20161%20276%202080>
>
> SEVENDALE HOUSE,
> DALE STREET,
> MANCHESTER, M1 1JB.
>
> REGISTERED IN ENGLAND NO: 3759526<tel:3759526>
> > > > >

From: Moore,Michael (Accessibility) (HHSC)
Date: Thu, May 12 2016 6:59AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

Have you considered doing some a-b user testing with people with disabilities?

Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Andrew Brandwood
Sent: Thursday, May 12, 2016 1:51 AM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)

Hi Mike,

Thanks for your reply. I guess that is my question. Should I create a table or a list. I am not visually impaired myself so looking at the results I can interperet them in anyway that is easiest to me. Be that a list of results or a table.

I will be marking up which ever direction I take in the correct markup and applying aria live where appropriate.

I have seen this data written in html in many different ways.

I guess I'm asking which works best for people using assistive tech. I imagine a table within a list would get confusing, but I am only presuming.

Rather than presuming I'd prefer to get it right and usable.

Cheers
Andrew


From: Mike Barlow < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
Sent: Wednesday, May 11, 2016 8:05 pm
Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>


Well I would think that, since you're creating a "table of arrivals and departures" that a (properly encoded with proper scoping of course) would be the best course of action.
But you mention "live" will this be a page that will constantly be changing (via JS updating the DOM directly) or would the user have to do a page refresh to see any changes.
If the former, then I would also make use of ARIA Live Regions, that would inform the user when any content changes


*Mike Barlow*
Web Application Developer
Web Accessibility/Section 508 SME

Lancaster, Pa 17601<x-apple-data-detectors://6/0>
Office: 732.835-7557
Cell: 732.682.8226<tel:732.682.8226>
e-mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >

On Wed, May 11, 2016 at 2:52 PM, Andrew Brandwood < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> wrote:

> Hi all,
>
> I am currently working on a large rail network provider's group of
> websites. I am interested in opinion on how best to mark up the HTML
> for assistive technologies for live departures and arivals.
>
> I have seen many different methods, but none are conclusive. If anyone
> as any feedback on what works best or is the worst experience you have
> encountered I would much appreciate any input.
>
> Currently I am considering one of the following
>
> A.) Table
> B.) Ordered list
> C.) A combination of the two. A list with a table nested.
>
> In the table would be headings of arrival time, destination, platform,
> further details.
>
> Any help on best practice or things to avoid in this instance would be
> much appreciated.
>
> Kind regards
> Andrew
>
>
>
> ANDREW BRANDWOOD
> HEAD OF FRONT END DEVELOPMENT
> -
>
> CODECOMPUTERLOVE.COM<http://codecomputerlove.com>;<http://www.codecompu
> terlove.com/> @COMPUTERLOVERS<http://twitter.com/computerlovers>;
> +44 (0)161 276 2080<tel:+44%20161%20276%202080>
>
> SEVENDALE HOUSE,
> DALE STREET,
> MANCHESTER, M1 1JB.
>
> REGISTERED IN ENGLAND NO: 3759526<tel:3759526>
> > > archives at http://webaim.org/discussion/archives
> > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>

From: Andrew Brandwood
Date: Thu, May 12 2016 7:12AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

Hi,

Yes we will be running usability testing, we have a testing lab here, and a/b testing is something we do. Before we get to that stage I wanted to do a little ground work, and some research into what people's experiences were.

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, 13:59, "WebAIM-Forum on behalf of Moore,Michael (Accessibility) (HHSC)" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:

>Have you considered doing some a-b user testing with people with disabilities?
>
>Mike Moore
>Accessibility Coordinator
>Texas Health and Human Services Commission
>Civil Rights Office
>(512) 438-3431 (Office)
>
>-----Original Message-----
>From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Andrew Brandwood
>Sent: Thursday, May 12, 2016 1:51 AM
>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
>
>Hi Mike,
>
>Thanks for your reply. I guess that is my question. Should I create a table or a list. I am not visually impaired myself so looking at the results I can interperet them in anyway that is easiest to me. Be that a list of results or a table.
>
>I will be marking up which ever direction I take in the correct markup and applying aria live where appropriate.
>
>I have seen this data written in html in many different ways.
>
>I guess I'm asking which works best for people using assistive tech. I imagine a table within a list would get confusing, but I am only presuming.
>
>Rather than presuming I'd prefer to get it right and usable.
>
>Cheers
>Andrew
>
>
>>From: Mike Barlow < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
>Sent: Wednesday, May 11, 2016 8:05 pm
>Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
>To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
>
>
>Well I would think that, since you're creating a "table of arrivals and departures" that a (properly encoded with proper scoping of course) would be the best course of action.
>But you mention "live" will this be a page that will constantly be changing (via JS updating the DOM directly) or would the user have to do a page refresh to see any changes.
>If the former, then I would also make use of ARIA Live Regions, that would inform the user when any content changes
>
>
>*Mike Barlow*
>Web Application Developer
>Web Accessibility/Section 508 SME
>
>Lancaster, Pa 17601<x-apple-data-detectors://6/0>
>Office: 732.835-7557
>Cell: 732.682.8226<tel:732.682.8226>
>e-mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
>On Wed, May 11, 2016 at 2:52 PM, Andrew Brandwood < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>
>> Hi all,
>>
>> I am currently working on a large rail network provider's group of
>> websites. I am interested in opinion on how best to mark up the HTML
>> for assistive technologies for live departures and arivals.
>>
>> I have seen many different methods, but none are conclusive. If anyone
>> as any feedback on what works best or is the worst experience you have
>> encountered I would much appreciate any input.
>>
>> Currently I am considering one of the following
>>
>> A.) Table
>> B.) Ordered list
>> C.) A combination of the two. A list with a table nested.
>>
>> In the table would be headings of arrival time, destination, platform,
>> further details.
>>
>> Any help on best practice or things to avoid in this instance would be
>> much appreciated.
>>
>> Kind regards
>> Andrew
>>
>>
>>
>> ANDREW BRANDWOOD
>> HEAD OF FRONT END DEVELOPMENT
>> -
>>
>> CODECOMPUTERLOVE.COM<http://codecomputerlove.com>;<http://www.codecompu
>> terlove.com/> @COMPUTERLOVERS<http://twitter.com/computerlovers>;
>> +44 (0)161 276 2080<tel:+44%20161%20276%202080>
>>
>> SEVENDALE HOUSE,
>> DALE STREET,
>> MANCHESTER, M1 1JB.
>>
>> REGISTERED IN ENGLAND NO: 3759526<tel:3759526>
>> >> >> archives at http://webaim.org/discussion/archives
>> >> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>>
>>>>
>
>>>>>>>

From: Mike Barlow
Date: Thu, May 12 2016 7:13AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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.

Mike (Moore) also has a good point, you might want to try and reach out to
any individuals you know (or you could try contacting your local Easter
Seals office who often help out in situations like this) and run some
examples past 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 ADDRESS REMOVED =

On Thu, May 12, 2016 at 8:59 AM, Moore,Michael (Accessibility) (HHSC) <
= EMAIL ADDRESS REMOVED = > wrote:

> Have you considered doing some a-b user testing with people with
> disabilities?
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Andrew Brandwood
> Sent: Thursday, May 12, 2016 1:51 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
>
> Hi Mike,
>
> Thanks for your reply. I guess that is my question. Should I create a
> table or a list. I am not visually impaired myself so looking at the
> results I can interperet them in anyway that is easiest to me. Be that a
> list of results or a table.
>
> I will be marking up which ever direction I take in the correct markup and
> applying aria live where appropriate.
>
> I have seen this data written in html in many different ways.
>
> I guess I'm asking which works best for people using assistive tech. I
> imagine a table within a list would get confusing, but I am only presuming.
>
> Rather than presuming I'd prefer to get it right and usable.
>
> Cheers
> Andrew
>
>
> > From: Mike Barlow < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> Sent: Wednesday, May 11, 2016 8:05 pm
> Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto:
> = EMAIL ADDRESS REMOVED = >>
>
>
> Well I would think that, since you're creating a "table of arrivals and
> departures" that a (properly encoded with proper scoping of course) would
> be the best course of action.
> But you mention "live" will this be a page that will constantly be
> changing (via JS updating the DOM directly) or would the user have to do a
> page refresh to see any changes.
> If the former, then I would also make use of ARIA Live Regions, that would
> inform the user when any content changes
>
>
> *Mike Barlow*
> Web Application Developer
> Web Accessibility/Section 508 SME
>
> Lancaster, Pa 17601<x-apple-data-detectors://6/0>
> Office: 732.835-7557
> Cell: 732.682.8226<tel:732.682.8226>
> e-mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
> On Wed, May 11, 2016 at 2:52 PM, Andrew Brandwood <
> = EMAIL ADDRESS REMOVED = <mailto:
> = EMAIL ADDRESS REMOVED = >> wrote:
>
> > Hi all,
> >
> > I am currently working on a large rail network provider's group of
> > websites. I am interested in opinion on how best to mark up the HTML
> > for assistive technologies for live departures and arivals.
> >
> > I have seen many different methods, but none are conclusive. If anyone
> > as any feedback on what works best or is the worst experience you have
> > encountered I would much appreciate any input.
> >
> > Currently I am considering one of the following
> >
> > A.) Table
> > B.) Ordered list
> > C.) A combination of the two. A list with a table nested.
> >
> > In the table would be headings of arrival time, destination, platform,
> > further details.
> >
> > Any help on best practice or things to avoid in this instance would be
> > much appreciated.
> >
> > Kind regards
> > Andrew
> >
> >
> >
> > ANDREW BRANDWOOD
> > HEAD OF FRONT END DEVELOPMENT
> > -
> >
> > CODECOMPUTERLOVE.COM<http://codecomputerlove.com>;<http://www.codecompu
> > terlove.com/> @COMPUTERLOVERS<http://twitter.com/computerlovers>;
> > +44 (0)161 276 2080<tel:+44%20161%20276%202080>
> >
> > SEVENDALE HOUSE,
> > DALE STREET,
> > MANCHESTER, M1 1JB.
> >
> > REGISTERED IN ENGLAND NO: 3759526<tel:3759526>
> > > > > > archives at http://webaim.org/discussion/archives
> > > > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> >
> > > at http://webaim.org/discussion/archives
> > = EMAIL ADDRESS REMOVED = >
>
>
> > > at http://webaim.org/discussion/archives
> > > > > >

From: Andrew Brandwood
Date: Thu, May 12 2016 7:16AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

Cheers Mike,

Some good things to consider here. Thanks for your time.

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, 14:13, "WebAIM-Forum on behalf of Mike Barlow" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:

>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.
>
>Mike (Moore) also has a good point, you might want to try and reach out to
>any individuals you know (or you could try contacting your local Easter
>Seals office who often help out in situations like this) and run some
>examples past 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 ADDRESS REMOVED =
>
>On Thu, May 12, 2016 at 8:59 AM, Moore,Michael (Accessibility) (HHSC) <
> = EMAIL ADDRESS REMOVED = > wrote:
>
>> Have you considered doing some a-b user testing with people with
>> disabilities?
>>
>> Mike Moore
>> Accessibility Coordinator
>> Texas Health and Human Services Commission
>> Civil Rights Office
>> (512) 438-3431 (Office)
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Andrew Brandwood
>> Sent: Thursday, May 12, 2016 1:51 AM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
>>
>> Hi Mike,
>>
>> Thanks for your reply. I guess that is my question. Should I create a
>> table or a list. I am not visually impaired myself so looking at the
>> results I can interperet them in anyway that is easiest to me. Be that a
>> list of results or a table.
>>
>> I will be marking up which ever direction I take in the correct markup and
>> applying aria live where appropriate.
>>
>> I have seen this data written in html in many different ways.
>>
>> I guess I'm asking which works best for people using assistive tech. I
>> imagine a table within a list would get confusing, but I am only presuming.
>>
>> Rather than presuming I'd prefer to get it right and usable.
>>
>> Cheers
>> Andrew
>>
>>
>> >> From: Mike Barlow < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
>> Sent: Wednesday, May 11, 2016 8:05 pm
>> Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto:
>> = EMAIL ADDRESS REMOVED = >>
>>
>>
>> Well I would think that, since you're creating a "table of arrivals and
>> departures" that a (properly encoded with proper scoping of course) would
>> be the best course of action.
>> But you mention "live" will this be a page that will constantly be
>> changing (via JS updating the DOM directly) or would the user have to do a
>> page refresh to see any changes.
>> If the former, then I would also make use of ARIA Live Regions, that would
>> inform the user when any content changes
>>
>>
>> *Mike Barlow*
>> Web Application Developer
>> Web Accessibility/Section 508 SME
>>
>> Lancaster, Pa 17601<x-apple-data-detectors://6/0>
>> Office: 732.835-7557
>> Cell: 732.682.8226<tel:732.682.8226>
>> e-mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>>
>> On Wed, May 11, 2016 at 2:52 PM, Andrew Brandwood <
>> = EMAIL ADDRESS REMOVED = <mailto:
>> = EMAIL ADDRESS REMOVED = >> wrote:
>>
>> > Hi all,
>> >
>> > I am currently working on a large rail network provider's group of
>> > websites. I am interested in opinion on how best to mark up the HTML
>> > for assistive technologies for live departures and arivals.
>> >
>> > I have seen many different methods, but none are conclusive. If anyone
>> > as any feedback on what works best or is the worst experience you have
>> > encountered I would much appreciate any input.
>> >
>> > Currently I am considering one of the following
>> >
>> > A.) Table
>> > B.) Ordered list
>> > C.) A combination of the two. A list with a table nested.
>> >
>> > In the table would be headings of arrival time, destination, platform,
>> > further details.
>> >
>> > Any help on best practice or things to avoid in this instance would be
>> > much appreciated.
>> >
>> > Kind regards
>> > Andrew
>> >
>> >
>> >
>> > ANDREW BRANDWOOD
>> > HEAD OF FRONT END DEVELOPMENT
>> > -
>> >
>> > CODECOMPUTERLOVE.COM<http://codecomputerlove.com>;<http://www.codecompu
>> > terlove.com/> @COMPUTERLOVERS<http://twitter.com/computerlovers>;
>> > +44 (0)161 276 2080<tel:+44%20161%20276%202080>
>> >
>> > SEVENDALE HOUSE,
>> > DALE STREET,
>> > MANCHESTER, M1 1JB.
>> >
>> > REGISTERED IN ENGLAND NO: 3759526<tel:3759526>
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> >
>> >> >> at http://webaim.org/discussion/archives
>> >> = EMAIL ADDRESS REMOVED = >
>>
>>
>> >> >> at http://webaim.org/discussion/archives
>> >> >> >> >> >>
>>>>

From: Mike Barlow
Date: Thu, May 12 2016 7:20AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

You're welcome Andrew. Always looking to help out where I can.

*Mike Barlow*
Web Application Developer
Web Accessibility/Section 508 SME

Lancaster, Pa 17601
Office: 732.835-7557
Cell: 732.682.8226
e-mail: = EMAIL ADDRESS REMOVED =

On Thu, May 12, 2016 at 9:16 AM, Andrew Brandwood <
= EMAIL ADDRESS REMOVED = > wrote:

> Cheers Mike,
>
> Some good things to consider here. Thanks for your time.
>
> 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, 14:13, "WebAIM-Forum on behalf of Mike Barlow" <
> = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = >
> wrote:
>
> >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.
> >
> >Mike (Moore) also has a good point, you might want to try and reach out to
> >any individuals you know (or you could try contacting your local Easter
> >Seals office who often help out in situations like this) and run some
> >examples past 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 ADDRESS REMOVED =
> >
> >On Thu, May 12, 2016 at 8:59 AM, Moore,Michael (Accessibility) (HHSC) <
> > = EMAIL ADDRESS REMOVED = > wrote:
> >
> >> Have you considered doing some a-b user testing with people with
> >> disabilities?
> >>
> >> Mike Moore
> >> Accessibility Coordinator
> >> Texas Health and Human Services Commission
> >> Civil Rights Office
> >> (512) 438-3431 (Office)
> >>
> >> -----Original Message-----
> >> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> >> Behalf Of Andrew Brandwood
> >> Sent: Thursday, May 12, 2016 1:51 AM
> >> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> >> Subject: Re: [WebAIM] Travel Live departures and tables (Andrew
> Brandwood)
> >>
> >> Hi Mike,
> >>
> >> Thanks for your reply. I guess that is my question. Should I create a
> >> table or a list. I am not visually impaired myself so looking at the
> >> results I can interperet them in anyway that is easiest to me. Be that a
> >> list of results or a table.
> >>
> >> I will be marking up which ever direction I take in the correct markup
> and
> >> applying aria live where appropriate.
> >>
> >> I have seen this data written in html in many different ways.
> >>
> >> I guess I'm asking which works best for people using assistive tech. I
> >> imagine a table within a list would get confusing, but I am only
> presuming.
> >>
> >> Rather than presuming I'd prefer to get it right and usable.
> >>
> >> Cheers
> >> Andrew
> >>
> >>
> >> > >> From: Mike Barlow < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> >> Sent: Wednesday, May 11, 2016 8:05 pm
> >> Subject: Re: [WebAIM] Travel Live departures and tables (Andrew
> Brandwood)
> >> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto:
> >> = EMAIL ADDRESS REMOVED = >>
> >>
> >>
> >> Well I would think that, since you're creating a "table of arrivals and
> >> departures" that a (properly encoded with proper scoping of course)
> would
> >> be the best course of action.
> >> But you mention "live" will this be a page that will constantly be
> >> changing (via JS updating the DOM directly) or would the user have to
> do a
> >> page refresh to see any changes.
> >> If the former, then I would also make use of ARIA Live Regions, that
> would
> >> inform the user when any content changes
> >>
> >>
> >> *Mike Barlow*
> >> Web Application Developer
> >> Web Accessibility/Section 508 SME
> >>
> >> Lancaster, Pa 17601<x-apple-data-detectors://6/0>
> >> Office: 732.835-7557
> >> Cell: 732.682.8226<tel:732.682.8226>
> >> e-mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> >>
> >> On Wed, May 11, 2016 at 2:52 PM, Andrew Brandwood <
> >> = EMAIL ADDRESS REMOVED = <mailto:
> >> = EMAIL ADDRESS REMOVED = >> wrote:
> >>
> >> > Hi all,
> >> >
> >> > I am currently working on a large rail network provider's group of
> >> > websites. I am interested in opinion on how best to mark up the HTML
> >> > for assistive technologies for live departures and arivals.
> >> >
> >> > I have seen many different methods, but none are conclusive. If anyone
> >> > as any feedback on what works best or is the worst experience you have
> >> > encountered I would much appreciate any input.
> >> >
> >> > Currently I am considering one of the following
> >> >
> >> > A.) Table
> >> > B.) Ordered list
> >> > C.) A combination of the two. A list with a table nested.
> >> >
> >> > In the table would be headings of arrival time, destination, platform,
> >> > further details.
> >> >
> >> > Any help on best practice or things to avoid in this instance would be
> >> > much appreciated.
> >> >
> >> > Kind regards
> >> > Andrew
> >> >
> >> >
> >> >
> >> > ANDREW BRANDWOOD
> >> > HEAD OF FRONT END DEVELOPMENT
> >> > -
> >> >
> >> > CODECOMPUTERLOVE.COM<http://codecomputerlove.com>;<
> http://www.codecompu
> >> > terlove.com/> @COMPUTERLOVERS<http://twitter.com/computerlovers>;
> >> > +44 (0)161 276 2080<tel:+44%20161%20276%202080>
> >> >
> >> > SEVENDALE HOUSE,
> >> > DALE STREET,
> >> > MANCHESTER, M1 1JB.
> >> >
> >> > REGISTERED IN ENGLAND NO: 3759526<tel:3759526>
> >> > > >> > > >> > archives at http://webaim.org/discussion/archives
> >> > > >> > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> >> >
> >> > >> > archives
> >> at http://webaim.org/discussion/archives
> >> > >> = EMAIL ADDRESS REMOVED = >
> >>
> >>
> >> > >> > archives
> >> at http://webaim.org/discussion/archives
> >> > >> > >> > >> > >> > >>
> >> >> >> >> > > > >

From: David Farough
Date: Thu, May 12 2016 8:12AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408


>>> Mike Barlow < = EMAIL ADDRESS 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.

From: Andrew Brandwood
Date: Thu, May 12 2016 8:14AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408
>
>
>>>> Mike Barlow < = EMAIL ADDRESS 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.
>
>>>>

From: Mike Barlow
Date: Thu, May 12 2016 8:45AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS REMOVED =

On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
= EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
> = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408
> >
> >
> >>>> Mike Barlow < = EMAIL ADDRESS 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.
> >
> >> >> >> >> > > > >

From: Bourne, Sarah (ITD)
Date: Thu, May 12 2016 9:02AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

A preference for navigation by table versus by heading is going to vary a lot. More novice users might not have learned the by-table trick yet. I would probably provide the headings just to be sure, and especially if there is any text (now or later) not in the table. That might be things like service alerts, changes in schedule, amenities, etc. Headings would also be useful if you have groupings of tables, such as inbound and outbound schedules for the same route.

sb
Sarah E. Bourne
Director of IT Accessibility, MassIT
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
= EMAIL ADDRESS REMOVED =
http://www.mass.gov/MassIT

From: Brandon Keith Biggs
Date: Thu, May 12 2016 9:56AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

Hello,
How many different times do you plan to have?
If there are just 2 or 3, do a list, but if there are more, do a table.
Tables are good if they don't have any whitespace and they are labeled with
titles correctly. Don't be like Wikipedia and mislabel tables with the
first item in the table!
Also, tables are really annoying if they are used rather than CSS.
But in this case, go ahead and make an example and I'll let you know what I
think. I would say tables are best.
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Thu, May 12, 2016 at 5:59 AM, Moore,Michael (Accessibility) (HHSC) <
= EMAIL ADDRESS REMOVED = > wrote:

> Have you considered doing some a-b user testing with people with
> disabilities?
>
> Mike Moore
> Accessibility Coordinator
> Texas Health and Human Services Commission
> Civil Rights Office
> (512) 438-3431 (Office)
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Andrew Brandwood
> Sent: Thursday, May 12, 2016 1:51 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
>
> Hi Mike,
>
> Thanks for your reply. I guess that is my question. Should I create a
> table or a list. I am not visually impaired myself so looking at the
> results I can interperet them in anyway that is easiest to me. Be that a
> list of results or a table.
>
> I will be marking up which ever direction I take in the correct markup and
> applying aria live where appropriate.
>
> I have seen this data written in html in many different ways.
>
> I guess I'm asking which works best for people using assistive tech. I
> imagine a table within a list would get confusing, but I am only presuming.
>
> Rather than presuming I'd prefer to get it right and usable.
>
> Cheers
> Andrew
>
>
> > From: Mike Barlow < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >>
> Sent: Wednesday, May 11, 2016 8:05 pm
> Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = <mailto:
> = EMAIL ADDRESS REMOVED = >>
>
>
> Well I would think that, since you're creating a "table of arrivals and
> departures" that a (properly encoded with proper scoping of course) would
> be the best course of action.
> But you mention "live" will this be a page that will constantly be
> changing (via JS updating the DOM directly) or would the user have to do a
> page refresh to see any changes.
> If the former, then I would also make use of ARIA Live Regions, that would
> inform the user when any content changes
>
>
> *Mike Barlow*
> Web Application Developer
> Web Accessibility/Section 508 SME
>
> Lancaster, Pa 17601<x-apple-data-detectors://6/0>
> Office: 732.835-7557
> Cell: 732.682.8226<tel:732.682.8226>
> e-mail: = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>
> On Wed, May 11, 2016 at 2:52 PM, Andrew Brandwood <
> = EMAIL ADDRESS REMOVED = <mailto:
> = EMAIL ADDRESS REMOVED = >> wrote:
>
> > Hi all,
> >
> > I am currently working on a large rail network provider's group of
> > websites. I am interested in opinion on how best to mark up the HTML
> > for assistive technologies for live departures and arivals.
> >
> > I have seen many different methods, but none are conclusive. If anyone
> > as any feedback on what works best or is the worst experience you have
> > encountered I would much appreciate any input.
> >
> > Currently I am considering one of the following
> >
> > A.) Table
> > B.) Ordered list
> > C.) A combination of the two. A list with a table nested.
> >
> > In the table would be headings of arrival time, destination, platform,
> > further details.
> >
> > Any help on best practice or things to avoid in this instance would be
> > much appreciated.
> >
> > Kind regards
> > Andrew
> >
> >
> >
> > ANDREW BRANDWOOD
> > HEAD OF FRONT END DEVELOPMENT
> > -
> >
> > CODECOMPUTERLOVE.COM<http://codecomputerlove.com>;<http://www.codecompu
> > terlove.com/> @COMPUTERLOVERS<http://twitter.com/computerlovers>;
> > +44 (0)161 276 2080<tel:+44%20161%20276%202080>
> >
> > SEVENDALE HOUSE,
> > DALE STREET,
> > MANCHESTER, M1 1JB.
> >
> > REGISTERED IN ENGLAND NO: 3759526<tel:3759526>
> > > > > > archives at http://webaim.org/discussion/archives
> > > > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> >
> > > at http://webaim.org/discussion/archives
> > = EMAIL ADDRESS REMOVED = >
>
>
> > > at http://webaim.org/discussion/archives
> > > > > >

From: Brandon Keith Biggs
Date: Thu, May 12 2016 10:00AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
>
> On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
> = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
> > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408
> > >
> > >
> > >>>> Mike Barlow < = EMAIL ADDRESS 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.
> > >
> > >> > >> > >> > >> > > > > > > > > >
> > > > >

From: Jim Allan
Date: Thu, May 12 2016 11:20AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >
> > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
> > = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
> > > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408
> > > >
> > > >
> > > >>>> Mike Barlow < = EMAIL ADDRESS 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

From: Mike Barlow
Date: Thu, May 12 2016 12:41PM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS REMOVED =

On Thu, May 12, 2016 at 1:20 PM, Jim Allan < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> > >
> > > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
> > > = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
> > > > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408
> > > > >
> > > > >
> > > > >>>> Mike Barlow < = EMAIL ADDRESS 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
> > > > >

From: Birkir R. Gunnarsson
Date: Thu, May 12 2016 5:23PM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED =
>
> On Thu, May 12, 2016 at 1:20 PM, Jim Allan < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> > >
>> > > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
>> > > = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
>> > > > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax: 819-420-8408
>> > > > >
>> > > > >
>> > > > >>>> Mike Barlow < = EMAIL ADDRESS 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.

From: Mike Barlow
Date: Fri, May 13 2016 9:23AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS REMOVED =

On Thu, May 12, 2016 at 7:23 PM, Birkir R. Gunnarsson <
= EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >
> > On Thu, May 12, 2016 at 1:20 PM, Jim Allan < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >> > >
> >> > > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
> >> > > = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
> >> > > > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax:
> 819-420-8408
> >> > > > >
> >> > > > >
> >> > > > >>>> Mike Barlow < = EMAIL ADDRESS 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.
> > > > >

From: Moore,Michael (Accessibility) (HHSC)
Date: Fri, May 13 2016 1:55PM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

Hi Birkir

Your example of using aria-labelledby got me to thinking so I experimented with the following code

<h1>Table labeling examples</h1>

<table>
<caption role="heading" aria-level="2">This is the first table</caption>
<tr>
<th>
Header Column 1
</th>
<th>
Header Column 2
</th>
<th>
Header Column 3
</th>
</tr>
<tr>
<th>
Header Row 1
</th>
<td>
Data R1 C2
</td>
<td>
Data R1 C3
</td>
</tr>
<tr>
<th>
Header Row 2
</th>
<td>
Data R2 C2
</td>
<td>
Data R2 C3
</td>
</tr>
</table>

In FireFox (Current Release) and IE 11 JAWS 16 and NVDA (Current Release) The <caption> could be found navigating by table or by heading. In JAWS the caption was listed in both the headings list and in the tables list. The caption was not repeated when reading by line or paragraph.

This appears to provide good, non-obtrusive coverage even though I have technically overridden the semantics of the caption. I suppose that I could have nested a span inside of the caption to hold the role and level attributes and been technically more correct.

I would be interested to see if this works across more browser/screen reader combinations. Particularly in the Apple arena.


Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, May 12, 2016 6:23 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Travel Live departures and tables (Andrew Brandwood)

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 ADDRESS 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 ADDRESS REMOVED =
>
> On Thu, May 12, 2016 at 1:20 PM, Jim Allan < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> > >
>> > > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
>> > > = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
>> > > > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax:
>> > > > >819-420-8408
>> > > > >
>> > > > >
>> > > > >>>> Mike Barlow < = EMAIL ADDRESS 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.
>> > > > >
>> > > > >>> > > > >>> > > > >>> > > > >>> > > > >> > > > >> > > > archives at http://webaim.org/discussion/archives
>> > > > >> > > >
>> > > >> > > >> > > archives at http://webaim.org/discussion/archives
>> > > >> > >
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> >
>>
>>
>>
>> --
>> 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
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

From: Andrew Brandwood
Date: Mon, May 16 2016 3:54AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
>On Thu, May 12, 2016 at 7:23 PM, Birkir R. Gunnarsson <
> = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> >
>> > On Thu, May 12, 2016 at 1:20 PM, Jim Allan < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> >> > >
>> >> > > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
>> >> > > = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
>> >> > > > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax:
>> 819-420-8408
>> >> > > > >
>> >> > > > >
>> >> > > > >>>> Mike Barlow < = EMAIL ADDRESS 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.
>> >> >> >> >>
>>>>

From: Brandon Keith Biggs
Date: Mon, May 16 2016 9:50AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS REMOVED =
> >
> >On Thu, May 12, 2016 at 7:23 PM, Birkir R. Gunnarsson <
> > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >> >
> >> > On Thu, May 12, 2016 at 1:20 PM, Jim Allan < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
> >> >> > >
> >> >> > > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
> >> >> > > = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
> >> >> > > > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax:
> >> 819-420-8408
> >> >> > > > >
> >> >> > > > >
> >> >> > > > >>>> Mike Barlow < = EMAIL ADDRESS 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.
> >> > >> > >> > >> > >>
> >> >> >> >> > > > >

From: Andrew Brandwood
Date: Tue, May 17 2016 2:02AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | Next message →

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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> >
>> >On Thu, May 12, 2016 at 7:23 PM, Birkir R. Gunnarsson <
>> > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> >> >
>> >> > On Thu, May 12, 2016 at 1:20 PM, Jim Allan < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> >> >> > >
>> >> >> > > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
>> >> >> > > = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
>> >> >> > > > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax:
>> >> 819-420-8408
>> >> >> > > > >
>> >> >> > > > >
>> >> >> > > > >>>> Mike Barlow < = EMAIL ADDRESS 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.
>> >> >> >> >> >> >> >> >> >>
>> >>> >>> >>> >>> >> >> >> >>
>>>>

From: Gauvreau, Jennifer (CGI Federal)
Date: Tue, May 17 2016 9:39AM
Subject: Re: Travel Live departures and tables (Andrew Brandwood)
← Previous message | No next message

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 ADDRESS 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 ADDRESS REMOVED = ] On Behalf Of Andrew Brandwood
Sent: Tuesday, May 17, 2016 4:02 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = on behalf of = EMAIL ADDRESS 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 ADDRESS REMOVED =
>> >
>> >On Thu, May 12, 2016 at 7:23 PM, Birkir R. Gunnarsson <
>> > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> >> >
>> >> > On Thu, May 12, 2016 at 1:20 PM, Jim Allan < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED =
>> >> >> > >
>> >> >> > > On Thu, May 12, 2016 at 10:14 AM, Andrew Brandwood <
>> >> >> > > = EMAIL ADDRESS 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 ADDRESS REMOVED = on behalf of
>> >> >> > > > = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = Tel: 819-420-8418 / Fax:
>> >> 819-420-8408
>> >> >> > > > >
>> >> >> > > > >
>> >> >> > > > >>>> Mike Barlow < = EMAIL ADDRESS 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.
>> >> >> >> >> >> >> >> >> >>
>> >>> >>> >>> >>> >> >> >> >>
>>>>