Re: Headers Are Confusing in HTML5

On 01.12.15 13:00, Léonie Watson wrote:
>> From: Martin Janecke [mailto:w3.org@prlbr.com]
>> Sent: 01 December 2015 10:26
>> On 01.12.15 09:22, Léonie Watson wrote:
>>>> From: Martin Janecke [mailto:w3.org@prlbr.com]
>>>> Sent: 30 November 2015 22:06
>>>> Isn't it strange to have these two but no page-specific headers?
>>>
>>> When <header> is scoped to <body> it represents the header for the
>> document. From the HTML5.1 spec [1]:
>>>
>>> "When the nearest ancestor sectioning content or sectioning root element
>> is the body element, then it applies to the whole page."
>>>
>> But the accessibility mapping to the banner role implies something else [1]:
>>
>> "banner (role): A region that contains mostly site-oriented content, rather
>> than page-specific content."
> 
> The HTML spec says that when scoped to <body>, the <header> is the header for the page. The ARIA spec says that the element with the banner role should contain sitewide information.
> 
> In other words the page header should contain sitewide information - exactly the way we've been designing websites for the past 20 years.

That may be fine but brings me back to the point that we've got the
header element for site-specific information now and the header element
for section-specific information, but no header element for
page-specific information. Whether this state is confusing may be open
to debate, but the state itself is a fact, isn't it?

This is not a theoretical problem for me, but a practical. Maybe you can
help me solve that and/or maybe I can illustrate my point better
explaining my practical problem.

I am using a light-weight markup language for webpages and have
programmed and published the converter from that light-weight markup
language to HTML.

The light-weight markup language features headings of different levels.
The top-level heading is usually used only once and is then specific to
the whole page and only the whole page. You'd use lower-level headings
for chapters etc.

The light-weight markup language allows every heading to be grouped with
additional information such as a tagline, and my converter translates
this by putting the heading and the associated tagline into a HTML
header element, which is what the HTML spec advises. [1]

But the accessibility mapping of header scoped to body -> banner role
implies that it is wrong to use header to group the main heading of the
current document and only the current document with associated
information using the header element, right?

So how shall I make the converter do the HTML markup correct and
accessible? Would that be the advised way to do it right:

| <body>
|   <div class='heading'>
|     <h1>Are there elephants on the moon?</h1>
|     <p>You'll be amazed by what science has to say about this</p>
|   </div>
|   <header>
|     <h2>Introduction: A curious observation</h2>
|     <p>A drunk farmer looking into the dark set the ball rolling</p>
|   </header>
|   <p>When farmer Martin stumbled over a stick in front of the pub …

Here I do the same thing twice: use a heading together with a tagline
(or whatever that is called). But I have to use different markup for
grouping, because the header works for the section-specific markup, but
not for page-specific markup, due to the mapping to the banner role in
that case.

Let me expand my example to have a site-specific header as well
(explicit markup for site-specific stuff is limited in the light-weight
markup language, but we can always configure the converter to include a
site-specific HTML banner automatically – this is a typical use case).
Would this be good markup?

| <body>
|   <header>
|     <img src='fancy-news-website-logo.png' alt='The Village Times'>
|     <nav>
|       <ul>
|         <li><a href='/news/'>News</a></li>
|         <li><a href='/weather/'>Weather</a></li>
|         <li><a href='/horoscopes/'>Horoscopes</a></li>
|       </ul>
|     </nav>
|   </header>
|   <div class='heading'>
|     <h1>Are there elephants on the moon?</h1>
|     <p>You'll be amazed by what science has to say about this</p>
|   </div>
|   <header>
|     <h2>Introduction: A curious observation</h2>
|     <p>A drunk farmer looking into the dark set the ball rolling</p>
|   </header>
|   <p>When farmer Martin stumbled over a stick in front of the pub …

It feels bad when I think about implementing this in my converter –
using the same header element for two conceptually different things but
using different markup for conceptually identical things.

Thanks
Martin

[1] http://www.w3.org/TR/html/common-idioms.html#sub-head

Received on Tuesday, 1 December 2015 14:20:35 UTC