E-mail List Archives

Search E-mail List Archives for

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

From: TRAUTWEIN_PAUL
Date: Wed, Nov 02 2016 12:53PM
Subject: Headings or Table Captions
No previous message | Next message →

Hi,

I have a question about the use of captions in tables.

There are times when I want my captions to visually match the look and feel of my heading tags. (that's easy enough)

But there are also times when I'd like them to behave like a heading as well.

I found some code that I thought would work, but my tests don't bear it out using different browsers and screen readers:

<caption role="heading" aria-level="2->Heading Text</caption>

This works pretty well using JAWS on a PC, but they are skipped when listing headings using Voiceover on a Mac.

Is there a better way to do this, or should I simply skip the 'caption- and add a heading tag above the table?

Thanks.

Paul Trautwein | Web Coordinator
Santa Monica College | Marketing Department
1900 Pico Blvd. Santa Monica CA 90405
310.434.4204 | www.smc.edu

From: Birkir R. Gunnarsson
Date: Wed, Nov 02 2016 1:13PM
Subject: Re: Headings or Table Captions
← Previous message | Next message →

I would rather use a regular heading, and assign it as the source of
the accessible name for the table using aria-lbelledby
<h2 id="capt1">Pirates of the Caribbean</h2>
<table aria-labelledby="capt1">
...
</table>
This way you get your heading, and you assign it as the accessible
name for the table.

Just make sure the heading is visually ocated close to the table, so
that users of screen magnification will see it.



On 11/2/16, TRAUTWEIN_PAUL < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
>
> I have a question about the use of captions in tables.
>
> There are times when I want my captions to visually match the look and feel
> of my heading tags. (that's easy enough)
>
> But there are also times when I'd like them to behave like a heading as
> well.
>
> I found some code that I thought would work, but my tests don't bear it out
> using different browsers and screen readers:
>
> <caption role="heading" aria-level="2->Heading Text</caption>
>
> This works pretty well using JAWS on a PC, but they are skipped when listing
> headings using Voiceover on a Mac.
>
> Is there a better way to do this, or should I simply skip the 'caption- and
> add a heading tag above the table?
>
> Thanks.
>
> Paul Trautwein | Web Coordinator
> Santa Monica College | Marketing Department
> 1900 Pico Blvd. Santa Monica CA 90405
> 310.434.4204 | www.smc.edu
> > > > >


--
Work hard. Have fun. Make history.

From: Jared Smith
Date: Wed, Nov 02 2016 1:16PM
Subject: Re: Headings or Table Captions
← Previous message | Next message →

An element can only have one role, so it will be either a caption OR a
heading in this case. You can't have both with one element.

Birkir's recommendation works, but with HTML5 (and it works fine in
earlier HTML, though will cause a validation error), you can put the
heading inside the caption:
<caption><h2>Heading Text</h2></caption>.

Jared

From: Paul J. Adam
Date: Wed, Nov 02 2016 1:17PM
Subject: Re: Headings or Table Captions
← Previous message | Next message →

I see no problem with having both a heading tag and a caption tag, they visually look different. I would not make them the exact same text but something a little different.

It's a similar idea with fieldset legends and headings you could possibly hide the caption visually or hide the legend visually if they just duplicate the heading text above them.

Paul J. Adam
Accessibility Evangelist
www.deque.com

> On Nov 2, 2016, at 1:53 PM, TRAUTWEIN_PAUL < = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi,
>
> I have a question about the use of captions in tables.
>
> There are times when I want my captions to visually match the look and feel of my heading tags. (that's easy enough)
>
> But there are also times when I'd like them to behave like a heading as well.
>
> I found some code that I thought would work, but my tests don't bear it out using different browsers and screen readers:
>
> <caption role="heading" aria-level="2->Heading Text</caption>
>
> This works pretty well using JAWS on a PC, but they are skipped when listing headings using Voiceover on a Mac.
>
> Is there a better way to do this, or should I simply skip the 'caption- and add a heading tag above the table?
>
> Thanks.
>
> Paul Trautwein | Web Coordinator
> Santa Monica College | Marketing Department
> 1900 Pico Blvd. Santa Monica CA 90405
> 310.434.4204 | www.smc.edu
> > > >

From: TRAUTWEIN_PAUL
Date: Thu, Nov 03 2016 2:52PM
Subject: Re: Headings or Table Captions
← Previous message | Next message →

Thanks for all the recommendations.

I tried adding the <h2> tag directly into the <caption> tags (this seemed
to be the most direct and easiest thing to try). However, it didn't do
anything in Voiceover. (VO still skipped it when I listed all the
headings.)

My experience is limited - I have to use cheat sheets - but I've just
noticed that VO doesn't seem to recognize the caption tag with or without
the h2 tag. Is that an issue or am I not using the tool correctly?

In any case, I tried Birkir's suggestion with the 'id' attribute in the h2
tag and "aria-labelledby' attribute in the table tag, and although my h2
tags displayed in the list, the h2 tag didn't associate itself to the
table the same way a caption does. I tested this with JAWS, NVDA and
VoiceOver.

Paul Adam's suggestion of having both the h2 and caption makes sense, but
becomes redundant even if I reworded the title of the table for the h2 and
caption. Although I can hide the caption visually and simply have it read
by JAWS and NVDA if the user needs it. The user would hear it twice once
as an heading and then a second time as the caption associated with the
table.

These are basically 'titles' of the table, so maybe I should just stick
with the <h2> tags above the table, with or without the id/aria-labelledby
attributes, the user can still find the heading using any of the heading
lists for VO, JAWS or NVDA. And move on to the content if they choose.

I welcome any other thoughts.

Thanks again.




Paul Trautwein | Web Coordinator
Santa Monica College | Marketing Department
1900 Pico Blvd. Santa Monica CA 90405
310.434.4204 | www.smc.edu






On 11/2/16, 12:16 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:

>An element can only have one role, so it will be either a caption OR a
>heading in this case. You can't have both with one element.
>
>Birkir's recommendation works, but with HTML5 (and it works fine in
>earlier HTML, though will cause a validation error), you can put the
>heading inside the caption:
><caption><h2>Heading Text</h2></caption>.
>
>Jared
>

From: Birkir R. Gunnarsson
Date: Thu, Nov 03 2016 3:00PM
Subject: Re: Headings or Table Captions
← Previous message | No next message

Voiceover (on iOS at least) is notoriously bad with tables.
If you put an empty <td> cell in the top left corner of a table (which
is a recommended technique when a table has column and row headers,
but the row headers column does not really have a header), it will
shift all the column associations off by one.
To make it work you have to put an empty <th> cell (instead of a <td).
The aria-labelledby technique is valid, so it won't hurt to keep it in there.
Did you try navigating to the table using the shortcut key "t" (in
NVDA and Jaws), I thought aria-labelledby would work in most
combinations.
Last hack you could try (it is a bit of a hack), use role="heading"
and aria-level="x" on the <caption> element (x corresponds to the
heading level you want):
<caption role="heading" aria-level="2">I am a caption parading as an
h2 heading</caption>



On 11/3/16, TRAUTWEIN_PAUL < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks for all the recommendations.
>
> I tried adding the <h2> tag directly into the <caption> tags (this seemed
> to be the most direct and easiest thing to try). However, it didn't do
> anything in Voiceover. (VO still skipped it when I listed all the
> headings.)
>
> My experience is limited - I have to use cheat sheets - but I've just
> noticed that VO doesn't seem to recognize the caption tag with or without
> the h2 tag. Is that an issue or am I not using the tool correctly?
>
> In any case, I tried Birkir's suggestion with the 'id' attribute in the h2
> tag and "aria-labelledby' attribute in the table tag, and although my h2
> tags displayed in the list, the h2 tag didn't associate itself to the
> table the same way a caption does. I tested this with JAWS, NVDA and
> VoiceOver.
>
> Paul Adam's suggestion of having both the h2 and caption makes sense, but
> becomes redundant even if I reworded the title of the table for the h2 and
> caption. Although I can hide the caption visually and simply have it read
> by JAWS and NVDA if the user needs it. The user would hear it twice once
> as an heading and then a second time as the caption associated with the
> table.
>
> These are basically 'titles' of the table, so maybe I should just stick
> with the <h2> tags above the table, with or without the id/aria-labelledby
> attributes, the user can still find the heading using any of the heading
> lists for VO, JAWS or NVDA. And move on to the content if they choose.
>
> I welcome any other thoughts.
>
> Thanks again.
>
>
>
>
> Paul Trautwein | Web Coordinator
> Santa Monica College | Marketing Department
> 1900 Pico Blvd. Santa Monica CA 90405
> 310.434.4204 | www.smc.edu
>
>
>
>
>
>
> On 11/2/16, 12:16 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:
>
>>An element can only have one role, so it will be either a caption OR a
>>heading in this case. You can't have both with one element.
>>
>>Birkir's recommendation works, but with HTML5 (and it works fine in
>>earlier HTML, though will cause a validation error), you can put the
>>heading inside the caption:
>><caption><h2>Heading Text</h2></caption>.
>>
>>Jared
>>
>
> > > > >


--
Work hard. Have fun. Make history.