Combine WAI-ARIA and HTML5 mark-upTechnology 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.
Figure 6: Combination of WAI-ARIA and HTML5 elements
Table 1 gives a brief overview of HTML5 elements and their WAI-ARIA equivalent.
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.
Information that is tangentially related to the main page content, but can be read separately. Visually you might see this as a sidebar.
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