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 li and em and 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 aside or 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.
<header role="banner">
<nav role="navigation">
<aside role="complementary">
<section role="main">
<footer role="contentinfo">
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.
See Also:
In many instances it’s the browsers who are lagging behind in accessibility support for new HTML5 features, new features are implemented but not hooked up to the accessibility APIs that screen readers use. So equally the title of your post could be
“Waiting for Browsers to implement the Semantics of HTML5
Thanks for pointing that out, Steven. Appreciate the input.