Using HTML5 article 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.

Description

HTML5 has a variety of new section elements. They include the section, article, nav and aside elements.


The <article> element

The new article element is more self-contained as it is used to outline a self-contained composition that can be spread around the Web if required for example for syndication purposes.

NOTE: The article element can also represent a widget, and not just a blog entry or comment, but a composition and so on.

So if a blog post was added to our Guitar Gallery example using the article element.

Example 1: Using <article> to Add a Blog Post

Here is a page on Guitars and some placeholder text to show where comments can be added to the footer. Firstly we start with the initial code (before comments are added to the footer). This takes the form. 

<article id=”MyGuitarBlog”>
  <header>
    <h1>Your first high end Guitar</h1>
    <p> Taking the plunge, and why you should do it </p>
  </header>
  <p>Buying your first really high end axe is up there with moving house, 
    doing a driving test or getting married in terms of being really important 
    but the good news is it’s nothing like as stressful as any of those are!
  </p>
  <p>[…] </p>
  <footer>
    <p>Some comments from interested humans </p>
  </footer>
</article>

When some comments were actually added, they might look like the following comments in the Blog Post Wrapped in <article> Elements. 


<article id="MyGuitarBlog">
  <header>
    <h1>Your first high end Guitar</h1>
    <p> Taking the plunge, and why you should do it </p>
  </header>
  <p>Buying your first really high end axe is up there with moving house, doing 
a driving test or getting married in terms of being really important but the good news 
is it’s nothing like as stressful as any of those are!</p>
  <p>[…] </p>

  <footer>
    <section>
      <h1>My Guitar Blog Comments</h1>
      <article id="comment_1">
        <link href="#comment_1">
 
        <h2>Comment by: <span="name">Not George Harrison</span></h2>
  
        <p>My guitar doesn’t Gently Weep anymore.. can anyone help?</p>
      </article>

      <article id="comment_2">
        <link href="#comment_2">
   
        <h2>Comment by: <span="name">Jimi Jimi<span></h2>
   
        <p>I don’t know George, but I just hurt my Little Wing, when was I walking 
along the Watchtower, these days everything is just a haze, 
a kinda purpley one - weird
        </p>
      </article>

      <article id="comment_3">
        <link href="#comment_3">
   
        <h2>Comment by: <span="name">Mini JPage</span></h2>
 
        <p>Sounds weird Not George Harrison, does the song not remain the same?</p>
      </article>
    </section>
  </footer>
</article>

The idea is that they are self-contained so that they can be referenced or syndicated elsewhere if needed.

Example 2: Using <article> with ARIA to Add a Blog Post

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="contentinfo" with the aria-label="article" and aria-label="Blog comments" is advised. This would take the form. 

<article id=”MyGuitarBlog” role="contentinfo" aria-label="article">
  <header>
    <h1>Your first high end Guitar</h1>
    <p> Taking the plunge, and why you should do it </p>
  </header>
  <p>Buying your first really high end axe is up there with moving house, 
    doing a driving test or getting married in terms of being really important 
    but the good news is it’s nothing like as stressful as any of those are!
  </p>
  <p>[…] </p>
  <footer  role="contentinfo" aria-label="Blog Comments">
    <p>Some comments from interested humans </p>
  </footer>
</article>

Adding these ARIA roles and properties help to make the content more robust. The parent element containing the content can now also be navigated to using the screen readers ability to identify and focus on elements that have these roles ascribed to them. The parent element may also benefit from a tabindex="0" in order to keyboard only users to be able to TAB to the content.

The following is the above example with the ARIA roles and properties added. 


<article id="MyGuitarBlog" role="contentinfo" aria-label="article">
  <header>
    <h1>Your first high end Guitar</h1>
    <p> Taking the plunge, and why you should do it </p>
  </header>
  <p>Buying your first really high end axe is up there with moving house, doing 
a driving test or getting married in terms of being really important but the good news 
is it’s nothing like as stressful as any of those are!</p>
  <p>[…] </p>

  <footer aria-label="Blog Comments">
    <section>
      <h1>My Guitar Blog Comments</h1>
      <article id="comment_1">
        <link href="#comment_1">
 
        <h2>Comment by: <span="name">Not George Harrison</span></h2>
  
        <p>My guitar doesn’t Gently Weep anymore.. can anyone help?</p>
      </article>

      <article id="comment_2">
        <link href="#comment_2">
   
        <h2>Comment by: <span="name">Jimi Jimi<span></h2>
   
        <p>I don’t know George, but I just hurt my Little Wing, when was I walking 
along the Watchtower, these days everything is just a haze, 
a kinda purpley one - weird
        </p>
      </article>

      <article id="comment_3">
        <link href="#comment_3">
   
        <h2>Comment by: <span="name">Mini JPage</span></h2>
 
        <p>Sounds weird Not George Harrison, does the song not remain the same?</p>
      </article>
    </section>
  </footer>
</article>

Please note that the contents of the aria-label="Blog comments" can be tailored as required. This text string is announced as soon as the parent element is given focus by user agents like screen readers.

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

  • Check that article/section element contains all the information related to its topic.
  • Check that the article element does not contain information not related to its topic.

Check that <article> and <section> content has been added as required.

[Example 2] Check that <article> and <section> content has been added. If support for HTML5 within a user agent is in doubt, then add the ARIA role="contentinfo" and aria-label="[Some suitable label text]".

Expected Results

  • The checks above are 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.

Retrieved from "https://www.w3.org/WAI/GL/wiki/index.php?title=Using_HTML5_article_element&oldid=1638"