Using the aside element to indicate tangentially related content

From WCAG WG

Status

Applicability

Applies to a section of a document that contains content tangentially related to the content around the section.

This technique relates to:

Success Criterion 1.3.1 (Info and Relationships) How to Meet 1.3.1 (Info and Relationships) Understanding Success Criterion 1.3.1 (Info and Relationships) User Agent and Assistive Technology Support Notes

User Agent and Assistive Technology Support Notes

  • Some assistive technologies such as screen readers provide keystrokes to move to the next landmark or region on a page and this includes moving to the aside element.
    • Supported: JAWS, NVDA (Windows), VoiceOver (iOS and OS X)
    • Not supported: Window-Eyes
  • Some assistive technologies such as screen readers announce the presence of the aside element when the element in encountered during navigation.
    • Supported: JAWS, NVDA (Windows), VoiceOver (iOS and OS X)
    • Not supported: Window-Eyes

Description

The objective of this technique is to use the HTML5 aside element to indicate that it's content is tangentially related to the main article or a parent section. The aside element represents a section of a page that consists of content that could be considered separate from that content. Such sections are often represented as sidebars in printed typography.

The <aside> element useful for marking up a pull quote, which could be used on a web site where there were client testimonials. Other uses for the <aside> element include sidebars, advertising, and marking up content from other sources, such as social media updates.

Although he <aside> element can create a relationship between an article and tangentially related content, it is may not be needed to convey the relationship. For instance, the relationship may be indicated as a heading such as "Related Links".

Examples

Example 1

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

  <article>
  <p style="width:70%;">Some of 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. We hold adoption days on the 1st and 3rd Sunday of the month.</p>
  <aside style="float:right; width:25%;">
   <q> Alice (May 6th): We are so glad we visited the Animal Sanctuary, and brought home little Puddles.
       He is such a good puppy! </q>
  </aside>

  <p>Without the help and support of our donors and adopters we would never be able to do what we do.</p>
  </article>
  

Working example: https://awkawk.github.io/using_aside_content.html

Example 2

The following example shows how an aside is used to mark up a pull quote in a longer article. Quite often the designer of the page want the text of the pull quote to be part of the normal flow of the document as well as in a highlighted part of the page so it is provided redundantly.

<p>He later joined a large company, continuing on the same work.
<q>I love my job. People ask me what I do for fun when I'm not at
work. But I'm paid to do my hobby, so I never know what to
answer. Some people wonder what they would do if they didn't have to
work... but I know what I would do, because I was unemployed for a
year, and I filled that time doing exactly what I do now. But I'm
 paid to do my hobby, so I never know what to answer. </q></p>

<p>Of course his work — or should that be hobby? —
isn't his only passion. He also enjoys other pleasures.</p>

<aside class="LargeFontFrontCenter">
<q>People ask me what I do for fun when I'm not at work. But I'm
 paid to do my hobby, so I never know what to answer.</q>
</aside>

Example 2b

The following example shows a pull quote in a page which uses the aside element to mark up a pull quote in a longer article and to indicate that the content is related but tangential to the article content.

<article>
<aside>Initial specifications for URIs, HTTP, and HTML were refined</aside>

<p>In 1989, Tim Berners-Lee invented the World Wide Web (see the original proposal). He coined the term "World Wide Web," 
wrote the first World Wide Web server, "httpd," and the first client program (a browser and editor), "WorldWideWeb," in 
October 1990. He wrote the first version of the "HyperText Markup Language" (HTML), the document formatting language with 
the capability for hypertext links that became the primary publishing format for the Web. His initial specifications for 
URIs, HTTP, and HTML were refined and discussed in larger circles as Web technology spread.</p>
...
</article>

Working example: http://awkawk.github.io/pull_quote_example.html

Resources

Resources are for information purposes only, no endorsement implied.

HTML 5 aside element

The aside element can be used in conjunction with JavaScript techniques or jQuery techniques so that the text in the code is not repeated but rather auto-populated.

Related WCAG Techniques

  • G115: Using semantic elements to mark up structure: [1] (Sufficient)
  • G140: Separating information and structure from presentation to enable different presentations [2] (Sufficient)
  • H42: Using h1-h6 to identify headings: [3] (Sufficient)

Tests

Procedure

For each aside element in a page check if the content of the aside element is:

  1. tangentially related to the main content.
  2. contained inline with the related article.
  3. programmatically associated with the content to which it is related.
  4. is in a place within the document structure that indicates its relationship to the document as a whole.

Expected Results

  • At least one of the above checks is true.

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.