I was wrong about how to create accessible subtitles
Back in July, I wrote about how to create accessible subtitles using the [role="doc-subtitle"]
attribute.
I was wrong.
Adrian Roselli, who’s far more of an expert on this sort of thing than I am, pointed out some of the dangers and pitfalls of the role in an article last week.
The main issue with [role="doc-subtitle"]
is that it in many browser/screen reader combinations, it announces as either a heading without a level, or an h2
. Both of these have semantic implications for visually impaired users, and are not actually the desired behavior.
In a web (not epub) context:
- Safari on macOS will claim they are all heading level 2 (ignoring
aria-roledescription
), polluting the headings navigation and complicating the perceived page structure;- JAWS with Chrome will also claim they are all heading level 2, polluting the headings navigation and complicating the perceived page structure;
- Internet Explorer users will get no benefit from doc-subtitle;
- NVDA with Firefox works well;
- VoiceOver on iOS will also claim they are all heading level 2, and offers no context from
aria-roledescription
;- TalkBack with Chrome does not assign a level, but if you nest
doc-subtitle
within a native<h#>
the content will be hidden.- TalkBack with Firefox works well.
Adrian provides some helpful alternatives depending on your goal.
Go read his full article for a more in-depth look at the issues, the history of this spec, and so on. Trust me, it’s a good read!
As for me, I’m going to revert to using a .subheading
class.