Using HTML5 aside element

From WCAG WG

Technique Category

Status

Applicability

  • HTML5

This technique relates to:

  • Success Criterion 1.3.1 (Info and Relationships): [1] (Sufficient)


User Agent and Assistive Technology Support Notes

  • March 2012: These new sectioning elements are used to create a structure and document outline. They can be used in conjunction with traditional HTML structural elements like heading elements to provide nested content. Browser support is currently patchy.
  • Note that there is an issue with screen readers being able to parse headers that are nested inside section elements. For example, if explicitly ranked h1 to h6 headings are nested in HTML5 sectioning elements, as opposed to using exclusively h1 elements, JAWS 12.0.1170, as well as the JAWS 13.0.171 beta, will misrepresent the heading hierarchy. This issue is outlined in the following article by Jason Kiss of Accessible Culture.
  • Note: Screen readers currently don't recognise the aside element (Apr. 2012). We expect they will in the near future.

Description

The purpose of this technique is to help users of assistive technology, such as screen readers, to quickly and easily navigate to a section of a page, and to skip over sections of a page that they do not need. The element can also be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.

HTML5 has a variety of section elements that can aid in this. The <aside> element is one of them. It helps the user identify supplementary content. For more on the [http://dev.w3.org/html5/spec/the-aside-element.html#the-aside-element <aside> element see the HTML5 specification.

Example 1: the <aside> Element

An animal shelter website uses the <aside> element to mark up a happy customer's feedback from their experience of animal rescue..

<p>Some our our services include, taking animals into our shelter who are mistreated and abused. 
Many people come and visit us also to look for an animal to care for, like this testimonial 
from a happy family who brought home a puppy shows.</p>

<p>Without the help and support of people like that we would never be able to do what we do</p>

[...]

<aside>
 <q> We are so glad we visited the Animal Sanctuary, and brought home little Puddles.
He is such a good puppy! </q>
</aside>

Other uses for the <aside> element include marking up content from other sources, such as Twitter feeds or Facebook updates.

Example 2: the <aside> Element with ARIA

However, in order to make the structure more accessible to user agents that support ARIA as well as ensuring that user agents that don't support HTML5 can also understand the structure, adding the ARIA role="note" as follows or role="complementary" is advised.

<p>Some our our services include, taking animals into our shelter who are mistreated and abused. 
Many people come and visit us also to look for an animal to care for, like this testimonial 
from a happy family who brought home a puppy shows.</p>

<p>Without the help and support of people like that we would never be able to do what we do</p>

[...]

<aside role="note">
 <q> We are so glad we visited the Animal Sanctuary, and brought home little Puddles.
He is such a good puppy! </q>
</aside>


Example 3: the <aside> Element with ARIA

<p>Some our our services include, taking animals into our shelter who are mistreated and abused. 
Many people come and visit us also to look for an animal to care for, like this testimonial 
from a happy family who brought home a puppy shows.</p>

<p>Without the help and support of people like that we would never be able to do what we do</p>

[...]
<aside role="complementary">
 <q> We are so glad we visited the Animal Sanctuary, and brought home little Puddles.
He is such a good puppy! </q>
</aside>

Resources

Related WCAG Techniques

  • G115: Using semantic elements to mark up structure: [2] (Sufficient)
  • G140: Separating information and structure from presentation to enable different presentations

[3] (Sufficient)

  • H42: Using h1-h6 to identify headings: [4] (Sufficient)

Tests

Procedure

  • [Example 1]
  1. Check that <nav> content has been added.
  • [Example 2]
  1. Check that <nav> content has been added.
  2. If support for HTML5 within a user agent is in doubt, then add the ARIA role="note".
  • [Example 3]
  1. Check that <nav> content has been added.
  2. If support for HTML5 within a user agent is in doubt, then add the ARIA role="complementary".

Expected Results

For the first example, check #1 is true. For examples #2 and #3, check #1 and #2 are true. If the author is in doubt about the level of user agent support for a HTML5 element or attribute it is better to err on the side of caution and add the additional ARIA role as outlined.

If this is a sufficient technique for a success criterion, failing this test procedure does not necessarily mean that the success criterion has not been satisfied in some other way, only that this technique has not been successfully implemented and can not be used to claim conformance.