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:
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.
|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|
<th >Go to Inbox</th>
<td>shift + alt + 1</td>
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|
- 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
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.
For a quote or just to chat about your organization's needs