The new semantic elements in HTML5 hold accessibility promise. It’s merely potential for improvement at the current time, because the semantic elements introduced in HTML5 are not yet universally recognized by browsers and assistive technology devices. 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
- hgroup: an hgroup is in a header and can contain one or more h1, h2, or other heading elements
- 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 container similar to a div; related content can be contained in a section
- aside: the aside is tangentially related material on a page or as part of an article
- nav: navigation
Accessible Rich Internet Applications Suite (ARIA), defines a way to make Web content and Web applications more accessible. It is used to improve the accessibility of dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies.
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.
articlecolumnheaderdefinitiondirectorydocumentgroupheadingimglistlistitemmathnotepresentationregionrowrowheaderseparatortoolbar
Here are a few examples of how to add the role information to various elements:
<header role="banner">
<nav role="navigation">
<hgroup role="heading">
<aside role="complementary">
<section role="main">
<footer role="contentinfo">
Some roles can only be used once per page. banner and 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 banner role.
See also: ARIA Roles 101 and ARIA States 101.
Stumble it!
4 Comments
Nice post, interested in the use of role=heading on the hgroup. My reading of the role=heading in the spec would require a aria-level to be specified. I would have also thought the benefits of using H1 – H6 for AT users would also require the setting of aria-level to at least provide an equivalent level of information?
Also given the patchy support by browsers/AT that this is really a viable option right now, specifically role=header?
Those are good questions. I don’t think there is a solid answer right now, because the way assistive devices interpret the header/hgroup elements within the DOM or document outline isn’t settled yet, AFAIK. I’ve wondered myself how a page peppered with h1 elements in headers or hgroups would work for AT. Use of aria-level might be a way to help resolve that.
Just a heads-up: all the links to the roles on the W3C site need %23 replaced with #.
John, thanks for the heads up. WYSIWYG input: yuk.
One Trackback/Pingback
[...] article on making HTML5 elements more accessible found over at Web Teacher via WSG. « Older [...]
What can you contribute?