E-mail List Archives

Search E-mail List Archives for

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

From: Schafer, Carmen
Date: Tue, Sep 29 2015 11:13AM
Subject: Heading order
No previous message | Next message →

Dear Colleagues:
We perform accessibility testing on a variety of websites and applications, and hope to get some feedback on how others handle a common accessibility concern, improper heading order.

We have encountered several instances of improper heading order (e.g. an <h4> above an <h3>), but we can't seem to find a firm agreement as to a) whether improper heading order should be cited as an accessibility concern or usability/design concern or b) which, if any, of the WCAG 2.0 Success Criteria covers improper heading order. We have read articles and attended webinars with conflicting information, but we know it can be an issue, particularly for screen reader users who navigate by headings.

Would anyone be willing to weigh in and possibly give us a definitive answer so we make sure we have the fullest possible understanding of this issue and pass it on to developers and others.

Thank you for your time and assistance.

Carmen Schafer
User Support Analyst, ACT Center
Division of IT, University of Missouri

From: Jonathan Avila
Date: Tue, Sep 29 2015 11:32AM
Subject: Re: Heading order
← Previous message | Next message →

> We have encountered several instances of improper heading order (e.g. an <h4> above an <h3>), but we can't seem to find a firm agreement as to a) whether

The deciding factor is whether the missing or incorrect order correctly communicates information and relationships that are communicated visually. So, an h2 used with a navigation bar used before the main h1 of a page would not in my opinion fail WCAG. However, if an h4 was used before an h3 but visually communicated that it was a lesser importance or lower in the structure than that would be a failure.

Best Regards,

Jonathan

-- 
Jonathan Avila 
Chief Accessibility Officer
SSB BART Group 
= EMAIL ADDRESS REMOVED =
Phone 703.637.8957  
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Schafer, Carmen
Sent: Tuesday, September 29, 2015 1:13 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Heading order

Dear Colleagues:
We perform accessibility testing on a variety of websites and applications, and hope to get some feedback on how others handle a common accessibility concern, improper heading order.

We have encountered several instances of improper heading order (e.g. an <h4> above an <h3>), but we can't seem to find a firm agreement as to a) whether improper heading order should be cited as an accessibility concern or usability/design concern or b) which, if any, of the WCAG 2.0 Success Criteria covers improper heading order. We have read articles and attended webinars with conflicting information, but we know it can be an issue, particularly for screen reader users who navigate by headings.

Would anyone be willing to weigh in and possibly give us a definitive answer so we make sure we have the fullest possible understanding of this issue and pass it on to developers and others.

Thank you for your time and assistance.

Carmen Schafer
User Support Analyst, ACT Center
Division of IT, University of Missouri

From: John Hicks
Date: Wed, Sep 30 2015 8:07AM
Subject: Re: Heading order
← Previous message | Next message →

Hello

I am not sure I agree with this (actually not sure if I understand the
example given or its explanation).

Going from H4 to H3 is in itself fine, so long as the H4 is the last
"sub-item" of a *preceeding* H3 ... (was that what you meant?)

jumping from Hx to Hx+2 (or more) would seem to be the problem that is most
easily defined, yet if we were following what was in the visual we could
sometimes justify that even. But semantically it is clearly (locally)
wrong.

I'd say it is an accessibility problem by virtue of the use that Jaws and
Voiceover (via the rotor) make of Hx tags. Definitely it is in terms of
1.3.1 and 2.4.10 ...

I am sure another point of view is possible... even likely!


best,
John




2015-09-29 19:32 GMT+02:00 Jonathan Avila < = EMAIL ADDRESS REMOVED = >:

> > We have encountered several instances of improper heading order (e.g. an
> <h4> above an <h3>), but we can't seem to find a firm agreement as to a)
> whether
>
> The deciding factor is whether the missing or incorrect order correctly
> communicates information and relationships that are communicated visually.
> So, an h2 used with a navigation bar used before the main h1 of a page
> would not in my opinion fail WCAG. However, if an h4 was used before an h3
> but visually communicated that it was a lesser importance or lower in the
> structure than that would be a failure.
>
> Best Regards,
>
> Jonathan
>
> --
> Jonathan Avila
> Chief Accessibility Officer
> SSB BART Group
> = EMAIL ADDRESS REMOVED =
> Phone 703.637.8957
> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Schafer, Carmen
> Sent: Tuesday, September 29, 2015 1:13 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Heading order
>
> Dear Colleagues:
> We perform accessibility testing on a variety of websites and
> applications, and hope to get some feedback on how others handle a common
> accessibility concern, improper heading order.
>
> We have encountered several instances of improper heading order (e.g. an
> <h4> above an <h3>), but we can't seem to find a firm agreement as to a)
> whether improper heading order should be cited as an accessibility concern
> or usability/design concern or b) which, if any, of the WCAG 2.0 Success
> Criteria covers improper heading order. We have read articles and attended
> webinars with conflicting information, but we know it can be an issue,
> particularly for screen reader users who navigate by headings.
>
> Would anyone be willing to weigh in and possibly give us a definitive
> answer so we make sure we have the fullest possible understanding of this
> issue and pass it on to developers and others.
>
> Thank you for your time and assistance.
>
> Carmen Schafer
> User Support Analyst, ACT Center
> Division of IT, University of Missouri
>
>
> > > at http://webaim.org/discussion/archives
> > > > > >

From: Sailesh Panchang
Date: Wed, Sep 30 2015 8:38AM
Subject: Re: Heading order
← Previous message | Next message →

I too was confused. Surely an h3 can logically follow an h4. Now if
the h4 is styled to look more important such that the h3 appears to
be a subheading under the h4 and that makes sense semantically, that
is a problem.
Next, if there is an h3 after an h1 heading at start of main content I
am surely impacted as a screen reader user ... I arrow up to check if
there is some content that the SR is not announcing as a heading.
Sometimes it is an image with text that looks like a heading. This is
a problem and needs an h2 around it. And maybe made into text (1.4.5)
Sometimes it is text styled like a heading but not marked up as one
... surely needs a h-tag and is 1.3.1 issue.
Sometimes it is normal text that could have been a heading (h2)
semantically. Not a problem against any SC.
Sometimes there is just normal text: no problem against any SC.
Sometimes, there is no content between h1 and h3: Again not a problem
against any SC unfortunately as using h2 after h1 and h3 after h2 is
regarded as a best practice.
Thanks,
Sailesh


On 9/30/15, John Hicks < = EMAIL ADDRESS REMOVED = > wrote:
> Hello
>
> I am not sure I agree with this (actually not sure if I understand the
> example given or its explanation).
>
> Going from H4 to H3 is in itself fine, so long as the H4 is the last
> "sub-item" of a *preceeding* H3 ... (was that what you meant?)
>
> jumping from Hx to Hx+2 (or more) would seem to be the problem that is most
> easily defined, yet if we were following what was in the visual we could
> sometimes justify that even. But semantically it is clearly (locally)
> wrong.
>
> I'd say it is an accessibility problem by virtue of the use that Jaws and
> Voiceover (via the rotor) make of Hx tags. Definitely it is in terms of
> 1.3.1 and 2.4.10 ...
>
> I am sure another point of view is possible... even likely!
>
>
> best,
> John
>
>
>
>
> 2015-09-29 19:32 GMT+02:00 Jonathan Avila < = EMAIL ADDRESS REMOVED = >:
>
>> > We have encountered several instances of improper heading order (e.g. an
>> <h4> above an <h3>), but we can't seem to find a firm agreement as to a)
>> whether
>>
>> The deciding factor is whether the missing or incorrect order correctly
>> communicates information and relationships that are communicated visually.
>> So, an h2 used with a navigation bar used before the main h1 of a page
>> would not in my opinion fail WCAG. However, if an h4 was used before an
>> h3
>> but visually communicated that it was a lesser importance or lower in the
>> structure than that would be a failure.
>>
>> Best Regards,
>>
>> Jonathan
>>
>> --
>> Jonathan Avila
>> Chief Accessibility Officer
>> SSB BART Group
>> = EMAIL ADDRESS REMOVED =
>> Phone 703.637.8957
>> Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
>>
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
>> Behalf Of Schafer, Carmen
>> Sent: Tuesday, September 29, 2015 1:13 PM
>> To: = EMAIL ADDRESS REMOVED =
>> Subject: [WebAIM] Heading order
>>
>> Dear Colleagues:
>> We perform accessibility testing on a variety of websites and
>> applications, and hope to get some feedback on how others handle a common
>> accessibility concern, improper heading order.
>>
>> We have encountered several instances of improper heading order (e.g. an
>> <h4> above an <h3>), but we can't seem to find a firm agreement as to a)
>> whether improper heading order should be cited as an accessibility concern
>> or usability/design concern or b) which, if any, of the WCAG 2.0 Success
>> Criteria covers improper heading order. We have read articles and attended
>> webinars with conflicting information, but we know it can be an issue,
>> particularly for screen reader users who navigate by headings.
>>
>> Would anyone be willing to weigh in and possibly give us a definitive
>> answer so we make sure we have the fullest possible understanding of this
>> issue and pass it on to developers and others.
>>
>> Thank you for your time and assistance.
>>
>> Carmen Schafer
>> User Support Analyst, ACT Center
>> Division of IT, University of Missouri
>>
>>
>> >> >> at http://webaim.org/discussion/archives
>> >> >> >> >> >>
> > > > >

From: Chaals McCathie Nevile
Date: Wed, Sep 30 2015 8:39AM
Subject: Re: Heading order
← Previous message | Next message →

On Tue, 29 Sep 2015 19:32:58 +0200, Jonathan Avila
< = EMAIL ADDRESS REMOVED = > wrote:

>> We have encountered several instances of improper heading order (e.g.
>> an <h4> above an <h3>), but we can't seem to find a firm agreement as
>> to a) whether
>
> The deciding factor is whether the missing or incorrect order correctly
> communicates information and relationships that are communicated
> visually. So, an h2 used with a navigation bar used before the main h1
> of a page would not in my opinion fail WCAG. However, if an h4 was used
> before an h3 but visually communicated that it was a lesser importance
> or lower in the structure than that would be a failure.

That assumes that your information is presented in such a way that the
main headline comes first.

That is the most common way to do things, and there are good reasons for a
"pyramid" style where you start with a headline, but there are real use
cases for beginning with something that isn't the most important element.

On the other hand, if you are using e.g. h4 but presenting it visually as
something more important that what is represented in h3, I think you're
pretty clearly doing the wrong thing - not just for accessibility but HTML
in general.

> Best Regards,
>
> Jonathan
>
> --Jonathan AvilaChief Accessibility Officer
> SSB BART = EMAIL ADDRESS REMOVED =
> Phone 703.637.8957 Follow us: Facebook | Twitter | LinkedIn | Blog |
> Newsletter
>
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On
> Behalf Of Schafer, Carmen
> Sent: Tuesday, September 29, 2015 1:13 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Heading order
>
> Dear Colleagues:
> We perform accessibility testing on a variety of websites and
> applications, and hope to get some feedback on how others handle a
> common accessibility concern, improper heading order.
>
> We have encountered several instances of improper heading order (e.g. an
> <h4> above an <h3>), but we can't seem to find a firm agreement as to a)
> whether improper heading order should be cited as an accessibility
> concern or usability/design concern or b) which, if any, of the WCAG 2.0
> Success Criteria covers improper heading order. We have read articles
> and attended webinars with conflicting information, but we know it can
> be an issue, particularly for screen reader users who navigate by
> headings.
>
> Would anyone be willing to weigh in and possibly give us a definitive
> answer so we make sure we have the fullest possible understanding of
> this issue and pass it on to developers and others.
>
> Thank you for your time and assistance.
>
> Carmen Schafer
> User Support Analyst, ACT Center
> Division of IT, University of Missouri
>
>
> > > at http://webaim.org/discussion/archives
> > > > > --
Charles McCathie Nevile - web standards - CTO Office, Yandex
= EMAIL ADDRESS REMOVED = - - - Find more at http://yandex.com

From: Duff Johnson
Date: Wed, Sep 30 2015 8:50AM
Subject: Re: Heading order
← Previous message | Next message →

> On the other hand, if you are using e.g. h4 but presenting it visually as something more important that what is represented in h3, I think you're pretty clearly doing the wrong thing - not just for accessibility but HTML in general.

Which HTML is that? :-/

The definition of "Heading" in HTML 4.01 is notably different from the definition given in HTML 5.

Yet I see the notion of "importance' used interchangeably with "structure" all the time.

Perhaps, in the HTML world, it's a distinction without a difference? In which case, why change the definition?

Duff.

From: Léonie Watson
Date: Wed, Sep 30 2015 9:48AM
Subject: Re: Heading order
← Previous message | Next message →

> From: WebAIM-Forum On Behalf Of Schafer, Carmen
>
> We have encountered several instances of improper heading order (e.g. an
> <h4> above an <h3>), but we can't seem to find a firm agreement as to a)
> whether improper heading order should be cited as an accessibility concern
> or usability/design concern or b) which, if any, of the WCAG 2.0 Success
> Criteria covers improper heading order.
[...]
>
> Would anyone be willing to weigh in and possibly give us a definitive answer
> so we make sure we have the fullest possible understanding of this issue and
> pass it on to developers and others.

Do you have an example of the <h4> before <h3> scenario? Depending on the overall heading hierarchy, it may be entirely correct for the headings to be structured in this way. For example:

<h1>Title</h1>
...
<h2>Chapter 1</h2>
...
<h3>Section 1</h3>
...
<h4>Sub-section 1</h4>
...
<h4>Sub-section 2</h4>
...
<h3>Section 2</h3>
...
<h4>Subsection 1</h4>
...
<h2>Chapter 2</h2>
...

As others have noted, there is sometimes a good case for not starting the hierarchy with an <h1>. An example:

<h2>Navigation</h2>
...

<main>
<h1>Primary heading</h1>
...
<h2>Secondary heading</h2>
...
</main>

The key thing is to make sure the heading hierarchy reflects the structure of the content. For headings to be usable they need to be a representation of the visual structure.

For technical accessibility, heading hierarchy is usually handled under WCAG SC1.3.1 (info and relationships) [1]. One of the suggested techniques for meeting 1.3.1 is G141 (organizing a page using headings) [2].

If the <h4> preceeds the <h3> only to achieve some visual effect, then it fails SC1.3.1 under F43 (due to using structural markup in a way that does not represent relationships in the content) [3].
Léonie.

[1] http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/content-structure-separation-programmatic.html
[2] http://www.w3.org/TR/WCAG20-TECHS/G141.html
[3] http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F43


--
Senior accessibility engineer @PacielloGroup @LeonieWatson

From: Schafer, Carmen
Date: Wed, Sep 30 2015 11:43AM
Subject: Re: Heading order
← Previous message | No next message

Leonie, thank you for the thorough explanation which answered our questions completely!

Carmen Schafer
User Support Analyst, ACT Center
Division of IT, University of Missouri

-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Léonie Watson
Sent: Wednesday, September 30, 2015 10:48 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Heading order

> From: WebAIM-Forum On Behalf Of Schafer, Carmen
>
> We have encountered several instances of improper heading order (e.g.
> an <h4> above an <h3>), but we can't seem to find a firm agreement as
> to a) whether improper heading order should be cited as an
> accessibility concern or usability/design concern or b) which, if any,
> of the WCAG 2.0 Success Criteria covers improper heading order.
[...]
>
> Would anyone be willing to weigh in and possibly give us a definitive
> answer so we make sure we have the fullest possible understanding of
> this issue and pass it on to developers and others.

Do you have an example of the <h4> before <h3> scenario? Depending on the overall heading hierarchy, it may be entirely correct for the headings to be structured in this way. For example:

<h1>Title</h1>
...
<h2>Chapter 1</h2>
...
<h3>Section 1</h3>
...
<h4>Sub-section 1</h4>
...
<h4>Sub-section 2</h4>
...
<h3>Section 2</h3>
...
<h4>Subsection 1</h4>
...
<h2>Chapter 2</h2>
...

As others have noted, there is sometimes a good case for not starting the hierarchy with an <h1>. An example:

<h2>Navigation</h2>
...

<main>
<h1>Primary heading</h1>
...
<h2>Secondary heading</h2>
...
</main>

The key thing is to make sure the heading hierarchy reflects the structure of the content. For headings to be usable they need to be a representation of the visual structure.

For technical accessibility, heading hierarchy is usually handled under WCAG SC1.3.1 (info and relationships) [1]. One of the suggested techniques for meeting 1.3.1 is G141 (organizing a page using headings) [2].

If the <h4> preceeds the <h3> only to achieve some visual effect, then it fails SC1.3.1 under F43 (due to using structural markup in a way that does not represent relationships in the content) [3].
Léonie.

[1] http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/content-structure-separation-programmatic.html
[2] http://www.w3.org/TR/WCAG20-TECHS/G141.html
[3] http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F43


--
Senior accessibility engineer @PacielloGroup @LeonieWatson