Allow <section> element to be used semantically

[anormand]

Problem The current templates contain multiple h1 tags

Impact There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents.

"There are no implementations of the outline algorithm in browsers or other user agents and there is unlikely to be as there is no requirements on user agents to implement it. There are a few 3rd party implementations in JavaScript (demos) and one in XSLT in ePub. (this is used to produce a table of contents for a book).

It will probably not be dropped from the spec as features are dropped when they have implementation requirements but no implementations, this is not the case for the outline algorithm (there are no requirements).

There are requirements on user agents to map heading levels in acc APIs based on the headings outline depth http://www.w3.org/html/wg/drafts/html/master/dom.html#sec-implicit-aria-semantics

These have not been implemented because they rely on the outline algorithm being implemented (which is not a requirement and browser vendors have shown no intention to implement) I am in the process of talking with browser acc implementers to drop these requirements from the html spec."

See: http://webaim.org/discussion/mail_thread?thread=6343

Suggested resolution

Devise a heading schema that has proper semantic structure.

Example

Change:

<h1>Web.unimelb</h1>
    <h2>A digital design system for The University of Melbourne.</h2>
<h1>UOM v0.5</h1>   
<h1>For content creators</h1>   
<h1>For designers</h1>  
<h1>For developers</h1> 
<h1>Example Layouts</h1>    
    <h2>Please Choose</h2>
    <h2>Current Student</h2>
    <h2>Staff Member</h2>
    <h2>Close</h2>
    <h2>Study at Melbourne</h2>
    <h2>About us</h2>
    <h2>Research</h2>
    <h2>Engagement</h2>
    <h2>Alumni & friends</h2>
    <h2>Contact & Maps</h2>

To:

<h1>Web.unimelb</h1>        
    <h2>UOM v0.5</h2>   
    <h2>For content creators</h2>   
    <h2>For designers</h2>  
    <h2>For developers</h2> 
    <h2>Example Layouts</h2>    
    <h2>Portal</h2> 
        <h3>Current Student</h3>
        <h3>Staff Member</h3>
    <h2>Main Navigation</h2>    
    <h2>Search</h2> 
    <h2>University Sitemap</h2> 
        <h3>Study at Melbourne</h3>
        <h3>About us</h3>
        <h3>Research</h3>
        <h3>Engagement</h3>
        <h3>Alumni & friends</h3>
        <h3>Contact & Maps</h3>

Note: I have an Excel spreadsheet with more examples

[neilang]

+1 for devising a heading structure schema.

For reference, the HTML5 document outline for web.unimelb could be better too:

1. Web.unimelb
  1. A digital design system for The University of Melbourne.
  2. UOM v0.5
  3. Untitled Section
    1. Untitled Section
    2. For content creators
  4. Untitled Section
    1. For designers
    2. Untitled Section
  5. Untitled Section
    1. Untitled Section
    2. For developers
    3. Untitled Section
  6. Example Layouts
  7. Web.Unimelb

https://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fweb.unimelb.edu.au

[herrweis]

Great work Andy! Thanks!

[waitingallday]

@anormand Can this be written up as an article for the knowledge base? I don't know how we could enforce correct usage within the system itself.

[axelboc]

The main problem seems to be that multiple components in the design system force the use of section elements without considering semantics, like .half. It's also common to see section being used solely for its padding.

Ideally, we'd need to:

• [ ] remove default padding on section elements, and add utility class to serve the same purpose
• [ ] refactor any component that targets section elements specifically (e.g. .half)

This is similar to what we did with aside. It's no easy task, but might as well make it an official issue.