1893734 - The only heading on the about:newtab is H3

Status: RESOLVED FIXED

(Firefox :: New Tab Page, defect)

Description

[Anna Yeddi [:ayeddi]]

Attachment: No headings before or after the H3 are found on the page by NVDA

The Thought-provoking stories. Learn more is the only heading that the New Tab page has. And this heading is <h3>.

Per the WebAIM Screen Reader User Survey #10 results, Missing or improper headings were included in Top-10 list of problematic itemd in the overall rating of difficulty and frustration for screen reader users. 80% of the responders are relying on some form of markup to find information on a lengthy page, among them 71.6% of responders are likely to use headings first. The reported usefulness of heading levels for navigation has increased over time, and 88.8% of respondents find them very or somewhat useful.

While there are no other visual headings, there is no requirement to add any other (programmatic) headings (at the same time, the Firefox logo could be made in a heading based on its visual position and importance, as well as the importance of its meaning), but it is expected that the heading hierarchy would be appropriate. Each page has to have one and only one heading level 1 (<h1>). It’s like a title to a book.

The heading level should be adjusted in this case. I.e. if the Firefox logo is marked up as <h1>, the stories heading would be <h2>.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:amy, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Maxx Crawford [:maxx]]

Anna - The Firefox logo currently has no heading designation. Do you have a guide/recommendations on how to add it without any actual text? Currently, we just return a few <div>'s that get populated with images.

(WIP Note: we're adding an aria-label to the parent wrapper)

Comment 3

[Anna Yeddi [:ayeddi]]

(In reply to Maxx Crawford [:maxx] from comment #2)

Anna - The Firefox logo currently has no heading designation. Do you have a guide/recommendations on how to add it without any actual text? Currently, we just return a few <div>'s that get populated with images.

(WIP Note: we're adding an aria-label to the parent wrapper)

Hi Maxx,
would you be able to add another wrapper for the Logo component and make it <h1>? thus, the heading level 1 would be the logo's aria-label value - like a title for a book. This would not require or need any actual on-screen text to be added too.

And if Thought provoking stories could be done as <h2> (while visually not changing) - this would be the ideal scenario. The backup may be to add aria-level on this heading to set to 2, which is hacky. This fix would also not need any visual changes, while providing a better heading hierarchy allowing users with screen readers to navigate between heading levels without thinking they've missed something, etc.

Comment 4

[Maxx Crawford [:maxx]]

(In reply to Anna Yeddi [:ayeddi] from comment #3)

Thanks for the direction. We can wrap the logo in an <h1> and promoted the Thought provoking stories text to a <h2> without any visual issue changes.

Thanks!

Comment 5

[Maxx Crawford [:maxx]]

Attachment: Bug 1893734 - Adjust heading elements on HNT r?#home-newtab-reviewers

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/f3eb411b6184
Adjust heading elements on HNT r=home-newtab-reviewers,ayeddi,accessibility-frontend-reviewers,nbarrett

Comment 7

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/f3eb411b6184