Screen reader support for HTML5 sections
HTML5 includes a handful of sectioning elements that give documents a robust semantic structure. The header, footer, nav, article, section and aside elements give different regions of a document meaning. Amongst other things, that meaning can be understood by screen readers, and the information used to help blind and partially sighted people orient themselves and navigate around the page.
Now that HTML5 is being used on mainstream websites (such as that of the UK Government), it’s interesting to see how well screen readers support this handful of elements. Testing included Jaws 14, NVDA 2012.3 and Window Eyes 8, with Firefox 18 and Internet Explorer 9, and VoiceOver (Mac OSX 10.8.2) with Safari 6.
Thanks to Alastair Campbell and Kiran Kaja for VoiceOver testing, and Steve Faulkner for the mighty useful HTML5 Accessibility test page.
Test results
Screen reader support for HTML5 sections
| Element | Jaws 14/FF 18 | Jaws 14/IE 9 | NVDA 2012.3/FF 18 | NVDA 2012.3/IE 9 | VoiceOver/Safari 6 | Window Eyes 8/FF 18 | Window Eyes 8/IE 9 |
|---|---|---|---|---|---|---|---|
| article | Yes | Yes | No | No | No | No | No |
| aside | Yes | Yes | Yes | No | Yes | No | No |
| footer | Yes | No | Yes | No | Yes | No | No |
| header | No | No | No | No | Yes | No | No |
| nav | Yes | Yes | No | No | Yes | No | No |
| section | Yes | Yes | No | No | No | No | No |
Test notes
Of the six HTML5 elements tested, header is the least well supported.
Only Window Eyes does not support any of the HTML5 elements (in any browser). VoiceOver, Jaws and NVDA all support some elements, but not always consistently across browsers.
NVDA reports the start of supported elements. For example the aside element is announced as “Complimentary information landmark”. Jaws and VoiceOver report both the start and end of supported elements. For example Jaws announces “Article” and “Article end” for the article element, and VoiceOver uses the format "Entering article landmark" and "Leaving article landmark".
One difference between the screen readers that support the footer element is that VoiceOver reports it as "footer", whilst NVDA and Jaws use "Content information" and "Content info" respectively.
Jaws, VoiceOver and NVDA include supported elements when navigating by landmark. This makes sense because the header, footer, nav, article, section and aside elements all Map to ARIA landmarks. Worth noting that all screen readers tested have good support for ARIA landmarks.
Those elements that are not supported in a particular screen reader/browser combination are handled in the same way as a div or other element without semantic meaning would be. Which is to say that the content is accessible, but the element itself is not acknowledged in any way.