There are new semantic elements in HTML5 with names like
header, article, and
nav. But the screen readers haven’t quite caught up with the element names yet. The most recent test results I’ve seen on how various browsers and screen readers handle the new HTML5 semantic elements can be found at Accessible Culture.
When we talk about accessibility, we stress how using the correct HTML tag to format something is accessibility Rule Number One. The reason is that most HTML tags are self-describing – the tag itself describes the semantic underpinning of the content it’s used to format. For example, tags like
blockquote add meaning, semantic meaning, into the markup.
But what if the device you are using to get the content doesn’t recognize the semantics of an element like
section? You can add an attribute to the element that provides information that most assistive technology devices do recognize. The attributes I’m talking about describe ARIA roles. Here are a few example of new HTML5 semantic elements with ARIA roles.
What are the possible ARIA roles you can use with the new HTML5 semantic elements? The most useful for the situations I’m talking about are the “landmark” roles:
Screen readers have a pretty good track record with ARIA roles. Adding them to HTML5 markup (or any version of HTML prior to HTML5 as well) adds meaningful help for people using assistive technology.
One way to fill the time before screen readers are updated to recognize the new semantic elements is to make sure you include ARIA roles in your markup.