Screen reader support for HTML5 sections

HTML5 includes a handful of section 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.

Be the first to comment…

Comment on this post

Will not be published

This site uses Akismet to reduce spam. Learn how your comment data is processed.