The new semantic elements in HTML5 hold accessibility promise. Here are some of the the new elements.
- header: header can be used for a page element, a section, and article, or an aside element
- footer: footer can be used for a page element, a section, and article, or an aside element
- article: an article is a part of a page that is complete in itself with a heading, content, footer, and possibly sections
- section: a section is a a section of a page; related content can be contained in a section but it should have a heading and may contain articles with their own headings
- aside: the aside is tangentially related material on a page or as part of an article
- nav: navigation
ARIA roles work now in many browsers and screen readers. When they don’t, they are harmless. If you build a page as accessibly as you can and then add ARIA roles into it where possible, you increase the potential accessibility of the page. This is currently the recommended best practice with HTML5 semantic elements.
An ARIA role is added as an attribute to the relevant element. The landmark ARIA roles are helpful with the new HTML5 semantic elements:
There are also a number of roles that describe structure on a page.
Here are a few examples of how to add the landmark role information to various elements:
Some roles can only be used once per page.
contentinfo must be unique on a page. In other words, while you can have many
header elements on a page, only one header can fill the
[Note: This post was updated on June 12, 2014.]