WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Headings or Table Captions

for

From: Birkir R. Gunnarsson
Date: Nov 3, 2016 3:00PM

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