View source for Using HTML5 section element

== Technique Category==
[[Category:HTML5 Techniques]]

== Status ==
* New technique.
* [https://www.w3.org/2002/09/wbs/35422/HTML5_section/results#xsection Survey by TF Apr 30 2012]

== Applicability ==
* HTML5

This technique relates to:
* Success Criterion 1.3.1 (Info and Relationships): [http://www.w3.org/TR/2008/REC-WCAG20-20081211/#content-structure-separation-programmatic] (Sufficient)


== User Agent and Assistive Technology Support Notes ==

Since the section element does not require any special formatting or behavior, it should in principle 
work in most current browsers, allowing pages with the section element to work correctly.  However, currently, browser support is somewhat patchy.

Note that there is an issue with screen readers being able to parse headers that are nested inside section elements.  It is currently necessary to use heading tags at the correct level, even when 
they are nested inside section elements, until assistive technology (AT) is updated to use HTML5. 
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 [http://www.accessibleculture.org/articles/2011/10/jaws-ie-and-headings-in-html5/ issue is outlined in the following article by Jason Kiss of Accessible Culture].

SIDE NOTE: There is browser support for WAI-ARIA, and possible overlap 
between ARIA roles and <section> elements in the future; a recommended ARIA-role mapping 
for "section" is "region".  Also, JAWS announces "region" each
time it encounters a section element.  Applying the "aria-labelledby" property to the section element 
and pairing it with a heading attribute may increase the information that is available to AT.  Also, if support for HTML5 within a user agent is in doubt, then an author may add the ARIA <code>role="contentinfo"</code> and <code>aria-label="[Some suitable label text]"</code>.

== Description ==

HTML5 has a new section element.

==The <code><section></code> Element==


The section element creates a structure and document outline (semantic markup). It is similar to 
the div from HTML4, and represents a logical section or component of a web application or document.  However, the div is
a semantically neutral element, whereas the section element is not. The section element is exposed through the 
browser's accessibility Application Programming Interface (API).
    
The section element can (in theory) be used with traditional HTML structural elements like heading elements to 
provide nested content.  The theme of each section should be identified, typically by including a heading 
as a descendant of the section element (subject to caveats mentioned in USER AGENT NOTES).

The section element is a container for document content that has a related theme, and 
represents the section of a document that is grouped around a general concept.
Everything within a section element is related.  Also section elements may be nested if necessary.
The section element is a generic semantic element, that can be used to combine portions of a document together into
discrete units that are related in some way.  For example, the section element may create 
items inside an outline of a document, or divide page content into
related pieces (like an Introduction) followed by some background information on the topic. 

Some examples of usage are given following. The section element can be applied to each individual section of a 
tab switcher or content slider (if an unordered list
is not needed).  The section element can also divide a lengthy "terms and conditions" (or similar) page into 
numbered sections.   Furthermore, section elements can divide the different sections 
of a one-page website or portfolio.  A common use offline could be to denote the chapter of a book. 

The section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
When an element is needed only for styling purposes or as a
convenience for scripting, authors are encouraged to use the div element instead.  
More specifically, 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 is advised to just use a semantically neutral div. 
Also, if the elements in the section cannot be described in one or two 
sentences, then section should not be used; div should be used instead.

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

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

 <section>
 <h2>Fenders</h2>
   <p>Do you like Fenders or Gibsons? Well if a Fender is good enough for Jimi, it’s good enough for me!</p>
   <p>[…]</p>
   <h3> 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 to get it</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>

</pre>

==Example 2: Structuring HTML5 content with ARIA and  the <code><section></code> 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 <code>role="contentinfo"</code> with a corresponding <code>aria-label</code> that describes the section is advised. This would take the form.

<pre>
<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>

</pre>

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: [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G115] (Sufficient)
* G140: Separating information and structure from presentation to enable different presentations
[http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G140] (Sufficient)
* H42: Using h1-h6 to identify headings: [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H42] (Sufficient)

==Tests==

===Procedure===

* Check that section element contains all the information, and only such information, related to its topic.
* Check that the section has the correct presentation, and that the internal semantic structure is correct (and consistent with that presentation).

===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.