Combine WAI-ARIA and HTML5 mark-up

Technology oriented Frontend developer

Neither WAI-ARIA nor HTML5 is fully supported in all browsers and on all devices. It is therefore smart to combine them to get a fuller support. This is no problem to do. The code example on Document landmark roles did this. It is llustrated in figure 6.

 

Image illustrating combination of WAI-ARIA and HTML5 elements

Figure 6: Combination of WAI-ARIA and HTML5 elements

 

Table 1 gives a brief overview of HTML5 elements and their WAI-ARIA equivalent.

HTML5 WAI-ARIA Description
 
role=”banner”

Introduction to a page or section. Can contain a heading (H1-H6), site logo, navigation.

  role=”navigation”

Can be used for various types of navigation such as site navigation, sub-navigation, breadcrumbs, previous/next links.

 
role=”contentinfo”

Describes the page or a section of the page. A page’s footer may contain author name, copyright info, privacy policy, etc.

role=”complementary”

Information that is tangentially related to the main page content, but can be read separately. Visually you might see this as a sidebar.

 
no equivalent

Independent item such as a blog post, article, etc. Think of it as something that could be independently picked up and moved around, such as blog posts in a RSS feed.

Table 1: HTML5 elements and WAI-ARIA equivalents