WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Headings hierarchy

for

From: Chaals McCathie Nevile
Date: Apr 12, 2016 8:27AM

On Tue, 12 Apr 2016 15:58:06 +0200, Edelényi Zsolt < <EMAIL REMOVED> >
wrote:

> In my question only screen reader is important.
> widget is outside the section like this:
> <main>
> <article>
> <h1>
> <h2>
> </article>
> <div role="complementary">
> < h1> - my widget</h1>
> </div>

Coming from an HTML perspective, the div looks like it could be an HTML
<aside> or <section>, and the second h1 is because you have a second piece
of the page that is at the same level as the <article>. In that case, the
h1 makes sense - there are two things on the page at the same level, so
they have the same level heading.

Whether that is a confusing way to organise the content is another
question, and perhaps you would be better with something like:

<main>
<h1>wigwams and goose's bridle</h1>
<article>
<h2>Some real information</h2>
...
</article>
<section id="mywidget">
<h2>Feedback and complaints about my site</h2>
...
</section>
</main>

There is an alternative, that the widget is meant to be directly related
to the article. In that case I would be thinking of something like:

<main>
<section>
<h1>wigwams and goose's bridle</h1>
<article>
<h2>About wigwams</h2>
...
<h2>Goose and his bridle</h2>
...
</article>
<section>
<h2>Feedback and complaints about this article</h2>
...
</section>
</section>
</main>

(this is intentionally verbose).

In any event, I would try to avoid having two h1 elements on the same
page, if only because the structure of having another *primary* heading
half-way down is a bit confusing.

Note there is a separate issue in HTML 5.1 regarding the article element,
because we would like to make that less confusing too:
https://github.com/w3c/html/issues/110

cheers

> Üdvözlettel:
>
> Edelényi Zsolt
> www.akadálymentes-honlap.hu <http://www.xn--akadlymentes-honlap-tub.hu/>;
> +36 20 561-71-44
>
>
> 2016-04-12 15:50 GMT+02:00 Chaals McCathie Nevile
> < <EMAIL REMOVED> >:
>
>> On Tue, 12 Apr 2016 15:29:59 +0200, Edelényi Zsolt
>> < <EMAIL REMOVED> >
>> wrote:
>>
>> Let say H1 is the title of article, h2 is used in article, and then h1
>> is
>>> the widget.
>>>
>>
>> You mean like
>>
>> h1 - my page
>> h2 - some section
>> section
>> h1 - my widget
>>
>> Where the widget is meant to be a subsection of the things which have
>> the
>> h2 as a header?
>>
>> The HTML5 spec says you can do that, if you use a sectioning element,
>> like
>> section.
>>
>> Modern browsers apply a visual style sheet so it looks like the header
>> for
>> the widget is of "lower rank" than the h2.
>>
>> But they don't give the same information to screen readers, instead
>> telling them the widget header is the same rank as the first h1, i.e.
>> more
>> important than the h2.
>>
>> The HTML 5.1 spec will probably change this to remove the suggestion
>> that
>> you can use h1 inside sections, since it works differently for different
>> users, in a way that is worse than interoperable, it is actually
>> confusing
>> things by providing *different* interpretations.
>>
>> See also https://github.com/w3c/html/issues/169 - where comments are
>> welcome.
>>
>> cheers
>>
>> My blind testers say that this is not good practice. Widget
>>> should use H3 without any parent. Like this:
>>> h1- title of main content
>>> h2- subtitles of main content
>>> h3- title of widget.
>>>
>>>
>>> I would rather leave widgets without heading and put into
>>> role="complementary". But blind people say this is not good for them.
>>> What
>>> dou you think?
>>> Do you have any best practice for that?
>>> >>> >>> >>> >>>
>>
>>
>> --
>> Charles McCathie Nevile - web standards - CTO Office, Yandex
>> <EMAIL REMOVED> - - - Find more at http://yandex.com
>> >> >> >> >>
> > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
<EMAIL REMOVED> - - - Find more at http://yandex.com