Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Can a heading go inside a table caption
for WCAG conformance

I thought it might be a good experiment to see what would happen if a heading element h1 to h6 went inside a table caption like this:

<table><caption><h2>General</h2></caption> ...

The idea is to get the best of two types of screen reader navigation. It would allow the user to get to the table heading by pressing "h" in a screen reader to go to the next heading, or press "t" to go to the table and hear the caption element.

The table and caption elements can contain flow content which includes headings in HTML. So it seemed like a logical experiment. Here is the table:

General

Go to Inbox shift + alt + 1
Go to Calendar shift + alt + 2
Go to Taskbox shift + alt + 3
Go to Contacts shift + alt + 4
Go to Briefcase shift + alt + 5
Go to Preferences shift + alt + 6

Code Used

<table><caption><h2>General</h2></caption>
<tr>
<th >Go to Inbox</th>
<td>shift + alt + 1</td>
</tr>
<tr>
...
</table>

Results Accessibility Support technology used

  JAWS 2018 NVDA 2017.4 VoiceOver
FireFox58 JAWS died on page Navigates caption and heading N/A
IE11 Navigates caption and heading Navigates caption and heading N/A
Chrome 63 Navigates to table but not heading Navigates to table but not heading Navigates to table but not heading
Safari MacOS 11.03 N/A N/A Navigates to table but not heading
MS Edge 41 Navigates caption and heading Navigates caption and heading N/A
Safari on iOS N/A N/A Navigates to table but not heading

Conclusions

  • Firefox, IE, Edge show promissing results, on all screen readers on Windows by allowing both the table and the heading to be quick ways to hear the table caption.
  • VoiceOver doesn't recognitize the heading on any browser or platform, either on MacOS or iOS
  • Chrome doesn't seem recognize the heading on any screen reader on any OS.

Its a half decent idea, but is it a hack? What are your thoughts?

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.



CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA