W3C home > Mailing lists > Public > w3c-wai-gl@w3.org > July to September 2012

HTML5 sections and headings (was: Came across this in HTML 5 draft)

From: Christophe Strobbe <strobbe@hdm-stuttgart.de>
Date: Thu, 20 Sep 2012 17:56:47 +0200
Message-ID: <08a48a90447663703cbf33fdd6b4e299.squirrel@mail.hdm-stuttgart.de>
To: w3c-wai-gl@w3.org

Am Do, 19.07.2012, 06:21 schrieb Gregg Vanderheiden:
> Interesting
> G

.... but considered broken (from an accessibility point of view) or at
least confusing by:
* "The truth about structuring an HTML5 page"
<http://www.netmagazine.com/features/truth-about-structuring-html5-page>
(from Luke Stevens' book on HTML5; 2012)
* Roger Johansson: "HTML5 sectioning elements, headings, and document
outlines" (March 2011):
<http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/>
* Roger Johansson: "HTML5 document outline revisited" (April 2011):
<http://www.456bereastreet.com/archive/201104/html5_document_outline_revisited/>
* Derek Johnson: "HTML5 And The Document Outlining Algorithm" (August 2011):
<http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/>

Luke Stevens points out that many book authors and tutorial authors get
the outline algorithm wrong. (Outline algorithm:
<http://www.w3.org/TR/html5/headings-and-sections.html#outline>.) This
includes treating the header and footer elements (either implicitly or
explicitly) as being at the same level as article, aside, nav and section
(which are 'sectioning content elements'), even though header and footer
are not sectioning content. (You can check this in any HTML5 draft between
February 2009 and March 2012; since August 2009, the HTML5 drafts
explicitly warn against this confusion).
Even book authors who write about accessibility do this. See for example:
* Introducing HTML5 (by Lawson & Sharp, 1st edition, 2010), p. 8-9.
* Pro HTML5 Accessibility (2012), p. 161-162: includes header and footer
in a list of HTML5 sectioning elements.

Best regards,

Christophe


> Authors are also encouraged to explicitly wrap sections in elements of
sectioning content, instead of relying on the implicit sections
generated
> by having multiple headings in one element of sectioning content. For
example, the following is correct:
> <body>
>    <h4>Apples</h4>
>    <p>Apples are fruit.</p>
>    <section>
>       <h2>Taste</h2>
>       <p>They taste lovely.</p>
>       <h6>Sweet</h6>
>       <p>Red apples are sweeter than green ones.</p>
>       <h1>Color</h1>
>       <p>Apples come in various colors.</p>
>    </section>
> </body>
> However, the same document would be more clearly expressed as:
> <body>
>    <h1>Apples</h1>
>    <p>Apples are fruit.</p>
>    <section>
>       <h2>Taste</h2>
>       <p>They taste lovely.</p>
>       <section>
>          <h3>Sweet</h3>
>          <p>Red apples are sweeter than green ones.</p>
>       </section>
>    </section>
>    <section>
>       <h2>Color</h2>
>       <p>Apples come in various colors.</p>
>    </section>
> </body>
> Both of the documents above are semantically identical and would produce
the same outline in compliant user agents.
> This third example is also semantically identical, and might be easier
to
> maintain (e.g. if sections are often moved around in editing):
> <body>
>    <h1>Apples</h1>
>    <p>Apples are fruit.</p>
>    <section>
>      <h1>Taste</h1>
>      <p>They taste lovely.</p>
>      <section>
>         <h1>Sweet</h1>
>         <p>Red apples are sweeter than green ones.</p>
>      </section>
>    </section>
>    <section>
>      <h1>Color</h1>
>      <p>Apples come in various colors.</p>
>    </section>
> </body>
> This final example would need explicit style rules to be rendered well
in
> legacy browsers. Legacy browsers without CSS support would render all
the
> headings as top-level headings.

Source:
<http://www.w3.org/TR/html5/headings-and-sections.html#headings-and-sections>


Best regards,

Christophe

-- 
Christophe Strobbe
Akademischer Mitarbeiter
Adaptive User Interfaces Research Group
Hochschule der Medien
Nobelstra├če 10
70569 Stuttgart
Tel. +49 711 8923 2749
Received on Thursday, 20 September 2012 16:15:21 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 20 September 2012 16:15:22 GMT