This Wiki page is edited by participants of the WCAG Working Group. It does not necessarily represent consensus and it may have incorrect information or information that is not supported by other Working Group participants, WAI, or W3C. It may also have some very useful information.

Using HTML5 section element

From WCAG WG
Revision as of 05:44, 13 November 2012 by Lguarino (Talk | contribs)

Jump to: navigation, search

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 <section> Element

The <section> element is an element designed to programmatically designate sections of document content. It represents the section of a document that is grouped around a general theme and often comes with a specific heading.

A common use offline would be a chapter of a book, but online it will more likely be used to divide page content into related chunks, like an Introduction, followed by some background info on the topic.

Use of the <section> element is not to be thought of as outlining content that needs to be styled visually in a particular way. If this is the case the author may be best advised to just use a semantically neutral div.

The <section> element may be used in conjunction with a <div> element visual styling and presentation. However, elements like <section> are to be used for providing a semantic structure to your web page content, as shown in the next example that outlines a webpage about different guitars.

Example 1: Structuring HTML5 content with the <section> element

<article>
 <hgroup>
  <h1>The Guitar Gallery</h1>
  <h2>Lots of groovy guitars</h2>
 </hgroup>

 <section>
 <h2>What kind of Axeman are you?</h2>
   <p>Are you a Fender guy or a Gibson gal? Well if it’s good enough for Jimi, it’s good enough for me!</p>
   <p>[…]</p>
   <h3> The first Fender Guitars</h3>
     <p>[…]</p>
 </section>

 <section>
   <h2>Gibson Guitars</h2>
   <p>I want an SG but don’t want to take out a mortgage, Dear Abby.. got a problem</p>
   <p> More about my feelings of deprivation due to lack of antique Gibson guitars[…]</p>
 </section>

 <section>
   <h2>Acoustic Dreams</h2>
   <p>For the softer moments we have nylon acoustic guitars</p>
   <p> Well, I really like John Fahey and Leo Kottke, […]</p>
   <h3>What kind of guitar did Robbie Basho play??</h3>
 </section>
</article>

Example 2: Structuring HTML5 content with ARIA and the <section> element

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 a corresponding aria-label that describes the section is advised. This would take the form.

<article role="contentinfo" aria-label="Article about Guitars">
 <hgroup>
  <h1>The Guitar Gallery</h1>
  <h2>Lots of groovy guitars</h2>
 </hgroup>

 <section role="contentinfo" aria-label="What kind of Axeman are you?">
 <h2>What kind of Axeman are you?</h2>
   <p>Are you a Fender guy or a Gibson gal? Well if it’s good enough for Jimi, it’s good enough for me!</p>
   <p>[…]</p>
   <h3> The first Fender Guitars</h3>
     <p>[…]</p>
 </section>

 <section role="contentinfo" aria-label="Gibson Guitars">
   <h2>Gibson Guitars</h2>
   <p>I want an SG but don’t want to take out a mortgage, Dear Abby.. got a problem</p>
   <p> More about my feelings of deprivation due to lack of antique Gibson guitars[…]</p>
 </section>

 <section role="contentinfo" aria-label="Acoustic Guitars">
   <h2>Acoustic Dreams</h2>
   <p>For the softer moments we have nylon acoustic guitars</p>
   <p> Well, I really like John Fahey and Leo Kottke, […]</p>
   <h3>What kind of guitar did Robbie Basho play??</h3>
 </section>
</article>

Please note that the contents of the aria-label="[...]" 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

[Example 1]

  • Check that article/section element contains all the information related to its topic.
  • Check that the section 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/section element contains all the information related to its topic.
  • Check that the section element does not contain information not related to its topic.

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.