E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Edelényi Zsolt
Date: Tue, Apr 12 2016 7:29AM
Subject: Headings hierarchy
No previous message | Next message →

Let say H1 is the title of article, h2 is used in article, and then h1 is
the widget. 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?

From: Tim Harshbarger
Date: Tue, Apr 12 2016 7:33AM
Subject: Re: Headings hierarchy
← Previous message | Next message →

What do you mean by widget? Are you talking about something like a comment section or a section where you can like or post a link to the article on social media?

From: Chaals McCathie Nevile
Date: Tue, Apr 12 2016 7:50AM
Subject: Re: Headings hierarchy
← Previous message | Next message →

On Tue, 12 Apr 2016 15:29:59 +0200, Edelényi Zsolt < = EMAIL ADDRESS 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 ADDRESS REMOVED = - - - Find more at http://yandex.com

From: Edelényi Zsolt
Date: Tue, Apr 12 2016 7:58AM
Subject: Re: Headings hierarchy
← Previous message | Next message →

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>

Ü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 ADDRESS REMOVED = >:

> On Tue, 12 Apr 2016 15:29:59 +0200, Edelényi Zsolt < = EMAIL ADDRESS 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 ADDRESS REMOVED = - - - Find more at http://yandex.com
> > > > >

From: Edelényi Zsolt
Date: Tue, Apr 12 2016 7:59AM
Subject: Re: Headings hierarchy
← Previous message | Next message →

Yes. Exactly.

2016-04-12 15:33 GMT+02:00 Tim Harshbarger <
= EMAIL ADDRESS REMOVED = >:

> What do you mean by widget? Are you talking about something like a
> comment section or a section where you can like or post a link to the
> article on social media?
>
>

From: Chaals McCathie Nevile
Date: Tue, Apr 12 2016 8:27AM
Subject: Re: Headings hierarchy
← Previous message | No next message

On Tue, 12 Apr 2016 15:58:06 +0200, Edelényi Zsolt < = EMAIL ADDRESS 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 ADDRESS REMOVED = >:
>
>> On Tue, 12 Apr 2016 15:29:59 +0200, Edelényi Zsolt
>> < = EMAIL ADDRESS 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 ADDRESS REMOVED = - - - Find more at http://yandex.com
>> >> >> >> >>
> > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com