WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Fwd: Table captions using span and css class wb-invisible from the template

for

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

From: Rabab Gomaa
Date: Mon, Apr 22 2013 8:32AM
Subject: Fwd: Table captions using span and css class wb-invisible from the template
No previous message | Next message →

Hi Jared,

Sometimes the table is the only content under a heading tag. Adding a
caption would repeat the heading tag content.

Removing the caption and have no summary (in HTML 5), would that fail
WCAG 2.0 1.3.1 Info and Relationship?

May be setting invisible caption is not the best approach. Do you think
the use of ARIA role="heading" level="2" would be acceptable in this
case?
—
For example

Original table
<h1>Non-compliant products in Canada</h1>
<p>All products listed below are found non-compliant.</p>
<h2>Quebec </h2>
<table>
<tr>
<th>Brand</th>
<th>Product description</th>
<th>date of disposition</th>
</tr>
<tr>
<td>Abc Ltd.</td>
<td>Frozen chicken</td>
<td>2013-04-22</td>
</tr>
</table>

Approach 1: Use ARIA role="heading" level="2"
—--
<h1>Non-compliant products in Canada</h1>
<p>All products listed below are found non-compliant.</p>
<table>
<caption role="heading" level="2">Quebec</caption>
<tr>
<th>Brand</th>
<th>Product description</th>
<th>date of dispositon</th>
</tr>
<tr>
<td>Abc Ltd.</td>
<td>Frozen chicken</td>
<td>2013-04-22</td>
</tr>
</table>

—--
Approach 2: Use no caption

<h1>Non-compliant products in Canada</h1>
<p>All products listed below are found non-compliant</p>
<h2>Quebec </h2>
<table>
<tr>
<th>Brand</th>
<th>Product description</th>
<th>date of dispositon</th>
</tr>
<tr>
<td>Abc Ltd.</td>
<td>Frozen chicken</td>
<td>2013-04-22'étd"
</tr>
</table>


>>> Jared Smith < = EMAIL ADDRESS REMOVED = > 2/8/2013 2:10 pm >>>
I can think of no reason why one would want to present such a caption
only to screen reader users. If it's useful content, why not show it
to everyone? If it's not useful content, why force it on just screen
reader users? Either show it or remove it altogether - there's no
complex accessibility issues with that.

From a technical standpoint, it may be that NVDA and Firefox is being
used to test the page. For some reason it is currently (or at least
was a couple months ago) ignoring all content in Firefox that is given
overflow:auto styles. This is certainly a bug that needs to be
addressed.

Jared

From: Jared Smith
Date: Mon, Apr 22 2013 8:51AM
Subject: Re: Fwd: Table captions using span and css class wb-invisible from the template
← Previous message | Next message →

On Mon, Apr 22, 2013 at 8:32 AM, Rabab Gomaa wrote:

> Removing the caption and have no summary (in HTML 5), would that fail WCAG
> 2.0 1.3.1 Info and Relationship?

I don't think so, but it's debatable. There is no requirement that a
table have a caption. But if there is a visual caption and that
caption is not associated to the table, then it may be a failure.

How likely it is for a screen reader user to encounter the table
without reading the visual caption first? And if they do this, will
the table still make sense to them?

> May be setting invisible caption is not the best approach. Do you think the
> use of ARIA role="heading" level="2" would be acceptable in this case?

I think this would work. You'd want to test it though. You could just
put the <h2> inside the <caption>. This seems to work well for
accessibility and in all browsers, though it is an HTML validation
issue.

Another approach would be:

<h2 id="tablecaption">Quebec</h2>
<table aria-labelledby="tablecaption">

Jared

From: Sailesh Panchang
Date: Mon, Apr 22 2013 8:34PM
Subject: Re: Fwd: Table captions using span and css class wb-invisible from the template
← Previous message | Next message →

A table's caption is like a title for a table.
Screen readers announce it as one navigates to the table.
I discourage off-screen captions for the same reason Jared cited.
I am ok with an h<n> with the table's title and a table below it
without a caption.
That heading works like a section heading for all users and provides
context, structure etc ... enough for SC 1.3.1.
It is the author's prerogative to use h<n> or a caption.
There could be a data table or a paragraph of text under the heading
but if the author wants to use a section heading, that's fine too.
I fault use of heading above the table and an identical caption with
one of them made off-screen. Nuisance for screen reader users ...
avoidable duplication.
I do not recommend using summary attribute for table's caption ...
that is not what a summary is designed for.
Yes caption with an h<n> works alright bbbut it is duplicating
structural markup and that's why it is a validation issue.
The h-tag is really being used for styling only. Just make it bold or
whatever within the caption for visual reinforcement.
I also wonder why there is a need for something (in the context of
this discussion) to be exposed as a heading for AT users only. If it
is meant to be a heading for the table simply use the native HTML h<n>
tag above the table or a table caption.
Style the heading / caption as needed. Why use WAI-ARIA here?
Sailesh Panchang
www.deque.com

From: Rabab Gomaa
Date: Tue, Apr 23 2013 7:35AM
Subject: Re: Fwd: Table captions using span and css class wb-invisible from the template
← Previous message | No next message

Hi Sailesh,

I discourage off-screen captions as well.
The only thing that makes me think of ARIA solution is SC 1.3.1
It is not clear if an h<n> would be sufficient for a data table.

The current techniques requires either caption on summary.

The HTML 5 techniques under development on Wiki http://www.w3.org/WAI/GL/wiki/Techniques/HTML5 is not clear too..
- Failure of 1.3.1 for not including table title in CAPTION or not including footnotes in TFOOT. [Bruce]

Rabab

>>> Sailesh Panchang < = EMAIL ADDRESS REMOVED = > 4/22/2013 10:34 pm >>>
A table's caption is like a title for a table.
Screen readers announce it as one navigates to the table.
I discourage off-screen captions for the same reason Jared cited.
I am ok with an h<n> with the table's title and a table below it
without a caption.
That heading works like a section heading for all users and provides
context, structure etc ... enough for SC 1.3.1.
It is the author's prerogative to use h<n> or a caption.
There could be a data table or a paragraph of text under the heading
but if the author wants to use a section heading, that's fine too.
I fault use of heading above the table and an identical caption with
one of them made off-screen. Nuisance for screen reader users ...
avoidable duplication.
I do not recommend using summary attribute for table's caption ...
that is not what a summary is designed for.
Yes caption with an h<n> works alright bbbut it is duplicating
structural markup and that's why it is a validation issue.
The h-tag is really being used for styling only. Just make it bold or
whatever within the caption for visual reinforcement.
I also wonder why there is a need for something (in the context of
this discussion) to be exposed as a heading for AT users only. If it
is meant to be a heading for the table simply use the native HTML h<n>
tag above the table or a table caption.
Style the heading / caption as needed. Why use WAI-ARIA here?
Sailesh Panchang
www.deque.com