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

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


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


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


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