Be careful HTML 5 with ARIA

 

HTML 5 the next generation hyper text mark-up language for developing web pages and ARIA Accessible Rich Internet Applications for accessibility are the hot topics in the front-end community. In the process of making the mark-up more semantic and robust HTML 5 have come up with new tags such as <article>, <nav> etc. On the other hand Web Accessibility Initiative (WAI) of W3C has come up with new roles, states and properties to bridge the gap between the assistive technologies and authoring tools such as article(role), navigation (role) .

In HTML 4 tags such as article, nav are not available. To notify the users about the article region or navigation region of a web page ARIA roles article, navigation etc can be used.

<div role=”navigation” id=”top_nav”></div>

When the above role is used most of the screen readers on most of the browsers will announce “Navigation region start” and “Navigation region end” for the user to be aware of the portion of the web page where the current focus is.

In HTML 5 a new tag <nav> is introduced. This tag itself will announce the start of the navigation region and end of navigation region. Currently most of the screen readers and browsers have less support of HTML 5 tags but in the future the screen readers and browsers will support these tags.

It is not harm in using <nav role=”navigation” id=”top_nav”> but better to avoid it. Let us see few more such examples where HTML 5 tags conflict with ARIA roles.

Article

<article> tag of HTML 5 and role=”article” of ARIA specification are used in the mark-up for the same reason. Article is a section of a page that consists of a composition that forms an independent part of a document, page, or site. (W3C WAI Role model).

Screen Reader Support

HTML 5 Article

• JAWS supports article tag in Internet explorer 9, Google Chrome but not in Firefox 20.0.1.
• NVDA 2012.3 do not have support in any of the browsers.
• Talkback with Google Chrome do not support the HTML 5 article tag.

ARIA article(role)

• JAWS 13 has support with internet explorer 9, Firefox 20.0.1 and Google Chrome.
• NVDA2012.3 do not have support in any of the browsers.
• Talkback have support on Google Chrome.

Navigation

The <nav> tag of HTML 5 and the role=”navigation” of ARIA are used for the same purpose. The area of web page that contains A collection of navigational Elements (usually links) for navigating the document or related documents.

Screen Reader Support

HTML 5 Nav

• JAWS13 supports nav tag in all the 3 browsers.
• NVDA 2012.3 does not support HTML 5 nav tag in Internet explorer 9 and Google Chrome but announces as navigation landmark in Firefox 20.0.1
• Talkback with Google Chrome do not support the HTML 5 nav tag.

ARIA role=”navigation”

• JAWS 13 supports navigation (role) in all the 3 browsers.
• NVDA 2012.3 supports navigation (role) in all the 3 browsers.
• Talkback on Android supports the navigation role.

Footer

Unlike article and navigation elements footer have different names in HTML 5 and WAI ARIA. HTML 5 calls it as <footer> tag but WAI ARIA calls it as contentinfo (role). The perceivable region that contains information about the parent document. Examples of information included in this region of the page are copyrights and links to privacy statements.

Screen Reader support

HTML 5 <footer>

• JAWS 13 does not support HTML 5 footer tag in Internet explorer 9 and Google Chrome but announces as contentinfo landmark in Firefox 20.0.1
• NVDA 2012.3 does not support HTML 5 footer tag in Internet explorer 9 and Google Chrome but announces as contentinfo landmark in Firefox 20.0.1
• Talkback on Google Chrome do not support footer tag.

ARIA role contentinfo

• JAWS 13 supports contentinfo (role) in all the 3 browsers.
• NVDA 2012.3 supports contentinfo (role) in all the 3 browsers.
• Talkback on Google Chrome supports contentinfo (role).

Aside

Similar to footer, aside also differs from HTML 5 to WAI ARIA. HTML 5 calls it as aside tag and WAI ARIA calls it as complementary (role). Aside/ complementary roles is marked to a supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.

Screen reader support

HTML 5 aside

• JAWS 13 does not support HTML 5 aside tag in Internet explorer 9 and Google Chrome but announces as complementary landmark in Firefox 20.0.1
• NVDA 2012.3 does not support HTML 5 aside tag in Internet explorer 9 and Google Chrome but announces as complementary landmark in Firefox 20.0.1
• Talkback on Google Chrome does not support aside tag.

ARIA complementary (role)

• JAWS 13 supports complementary (role) in all the 3 browsers.
• NVDA 2012.3 supports complementary (role) in all the 3 browsers.
• Talkback on Google Chrome supports complementary(role).

Section

A section tag of HTML 5 defines a specific portion of the page . These section can be any one of the above land mark regions. ARIA section (role) is an abstract role. Content authors are recommended not to use section role in the content.

Only JAWS 13 with Firefox 20.0.1 announces region start and region end if the HTML 5 section tag is used. JAWS on any other browser, NVDA 2012.3 or Talkback does not currently support this tag.

Conclusion

Be careful while using HTML 5 semantics and ARIA roles.