1196468 - Header nesting - header following h2 is incorrect.

Status: RESOLVED FIXED

(www.mozilla.org :: Pages & Content, defect, P4)

Description

[David Weir (satdav)]

This bug can be affecting screen readers and accessibility 

the suggestion from the website was the following 

Repair: Modify the header levels so only an h3 or any header less than h3 follows h2.
Error Line 249, Column 13:
<h2 class="go">Download Firefox</h2>

see the guide lines for it on http://achecker.ca/checker/suggestion.php?id=38

http://achecker.ca/checker/index.php I used the wwww.mozilla.org url

Comment 1

[Craig Cook (:craigcook)]

To clarify:

The Download Firefox promo on the home page contains an h2 and an h4, skipping over h3. This is because the download button macro includes an explicit h4 but can be embedded anywhere, so that heading level may not always be correct. 

Download button - https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/firefox/includes/download-button.html#L7

Home promo - https://github.com/mozilla/bedrock/blob/master/bedrock/mozorg/templates/mozorg/home/home.html#L144-L153

Comment 2

[Schalk Neethling [:espressive]]

So, I do not believe we can effectively restrict where this widget is used and so, as mentioned by Craig, this might very well end up in a scenario like here where it breaks the desired flow of heading elements in the document outline.

Therefore, the only real way to resolve this is to not use a heading element but instead, use a semantically meaningless element such as a div, and adopt the styling used. Thoughts?

Comment 3

[Craig Cook (:craigcook)]

We could promote it up to <h3> since I'd wager we rarely need it to be an <h4> anyway. If it follows either an <h2> or another <h3> that would be fine, and it seems unlikely it'll follow an <h1> (though that's always possible and we'd be in the same boat). 

If we do want to ditch the heading, instead of a completely generic element I'd suggest using <p><strong> (and update CSS accordingly) so it still gets emphasis even if it isn't actually a title. That might be a safe compromise and would be both valid and semantically appropriate almost anywhere. The major downside of any non-heading is that we lose the benefit of natural landmarks in the document outline. A screen reader wouldn't treat a div or paragraph as a navigational access point, though we could possibly get around that with role="heading" (http://www.w3.org/TR/wai-aria/roles#heading).

So I'd favor switching to <h3> but we should first look through pages where the buttons appear and see if that creates more problems than it solves. My next choice would be <p role="heading"><strong>.

And it's also worth saying that although disrupting the outline hierarchy is undesirable, it doesn't actually BREAK anything. People using screen readers and other assistive technologies can still get to the content they need without much trouble. So we could also just leave it as-is.

Comment 4

[Schalk Neethling [:espressive]]

Thanks for the feedback Craig. I agree with your sentiments and using the word "break", was not the correct word choice ;) "disrupt" is more what I meant to convey.

Comment 5

[Schalk Neethling [:espressive]]

After looking at this a little more closely I have noticed that these h4 elements are only inserted in he noscript [https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/firefox/includes/download-button.html#L28] and .unrecognized-download [https://github.com/mozilla/bedrock/blob/master/bedrock/firefox/templates/firefox/includes/download-button.html#L31] containers so, for the most of their existence they are never actually seen.

Be that as it may, looking over the various pages, there are all kinds of scenarios, and yes, there are quite a few instances where it follows a H1. With that, I reckon we can safely switch these instances to a <p role="heading"><b>

Thoughts?

Comment 6

[Craig Cook (:craigcook)]

(In reply to Schalk Neethling [:espressive] from comment #5)
 
> Be that as it may, looking over the various pages, there are all kinds of
> scenarios, and yes, there are quite a few instances where it follows a H1.
> With that, I reckon we can safely switch these instances to a <p
> role="heading"><b>

Let's do it.

Comment 7

[Schalk Neethling [:espressive]]

Attachment: Link to Github pull-request: https://github.com/mozilla/bedrock/pull/3254

Comment 8

[[github robot]]

Commits pushed to master at https://github.com/mozilla/bedrock

https://github.com/mozilla/bedrock/commit/00101348e2ff37b236fd70d7682b360f84079059
Fix Bug 1196468, fix header nesting for download button

https://github.com/mozilla/bedrock/commit/330c51a9cdc85ef72efaba0256f96deb207dde04
Merge pull request #3254 from schalkneethling/bug1196468-header-nesting

Fix Bug 1196468, fix header nesting for download button