Using HTML5 section elements
Technique Category
Status
- New technique. Listing several related HTML5 techniques on one page.
- Surveyed by TF April 9, 2012
- Survey by TF Apr 30 2012 ?
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
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> Fenders</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</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 guitarts</p> <p> Well, I really like John Fahey and Leo Kottke, […]</p> <h3>What kind of guitar did Robbie Basho play??</h3> </section> </article>
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 2: 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. You can also think of an article as a small unit.
The new <nav> element allow the author to mark up major navigation blocks in the HTML5 pages.
<nav> <ul> <li>About us</li> <li>Services</li> <li>Contact</li> <li>Location</li> <li>Why Groovy?</li> </ul> </nav>
As an Aside, Did You Hear the One About the Vicar and the […]
The new <aside> element is a sectioning element used to provide content that is tangentially related to the main article or a parent section. You might be wondering what to do with it? An aside is normal in human speech and interaction, but it might be unusual in a markup language. There are some things that it is useful for, such as marking up a pull quote, which could be used on a web site where there were client testimonials. For example:
Example 4: 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> <aside> <q> 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 people like that we would never be able to do what we do</p>
Other uses for the <aside> element include marking up content from other sources, such as Twitter feeds or Facebook updates.
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
<section>content has the correct visual appearance and that the internal semantic structure of the example is well represented. - [Example 2] Check that
<article>content has the correct visual appearance and that the semantic structure of the example is well represented. - [Example 3] Check that
<nav>content has the correct visual appearance and that the semantic structure of the example is well represented. - [Example 4] Check that
<aside>content has the correct visual appearance and that the semantic structure of the example is well represented.
Expected Results
- The check above 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.