Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Headings that appear before the h1 element cause warnings #284

Closed
JoshTumath opened this issue Dec 11, 2018 · 6 comments
Closed

Headings that appear before the h1 element cause warnings #284

JoshTumath opened this issue Dec 11, 2018 · 6 comments
Assignees
@jroebu14
Labels
effort-ok open-pr A PR is open for this issue seeking-assignee It would be great if someone would pick this up and work on it. Stale

Comments

@JoshTumath
Copy link

Summary

Pages that contain headings before the h1 element fail the test named 'Structure: Headings: Headings must be in ascending order', even though this is not forbidden by BBC accessibility guidelines or the HTML specification.

Expected Behaviour

No warnings.

Current Behaviour

When running the tool on a page that contains a h2 element before the h1, a warning like this is displayed:

  ⚠ Structure: Headings: Headings must be in ascending order
    - First heading was not a main heading: //div[@id='bbcprivacy-prompt']/h2

Possible Solution

The rule 'Structure: Headings: Headings must be in ascending order' could be either:

  • modified to only check the document structure after the first h1 element
  • removed because there is currently no agreed standard for document outlines in HTML

Steps to Reproduce

For example, in the following HTML snippet, the first h2 would cause a warning.

<body>
  <h2>This will fail</h2>
  <h1>Foo</h1>
  <h2>Foo</h2>
  <h2>Foo</h2>
  <h2>Foo</h2>
</body>

Context & Motivation

On the BBC Children's websites, a cookie banner appears with a h2 heading. It appears before the article's h1 heading, causing the rule to fail.

Your Environment
@EmmaJP
Copy link
Contributor

EmmaJP commented Dec 11, 2018 •
edited
Loading

This is related to ORBIT elements, so relevant for all pages, not only Children's pages.

Josh shared https://www.w3.org/WAI/tutorials/page-structure/headings/#main-heading-after-navigation, which is a good example of the situation we have.

@EmmaJP EmmaJP added effort-ok seeking-assignee It would be great if someone would pick this up and work on it. labels Dec 11, 2018
@EmmaJP
Copy link
Contributor

EmmaJP commented Dec 11, 2018

It should be straight forward enough to remove the scenario at line 142 of https://github.com/bbc/bbc-a11y/blob/master/features/standards/mag/structure/02_headings.feature, and related tests.

However, I think it might be wise to include a check for h1 being the first heading within the main container. We do have checks that the page has one main container, so it would be reasonable to have a warning on that, so that h1 not being first is not abused.

<body>
  <nav>
    <h2>Foo</h2>
    <!-- navigation elements -->
  <nav>
  <main>
    <h1>This will pass</h1>
    <h2>Foo</h2>
    <!-- content elements -->
  <main>
</body>

<body>
  <nav>
    <h2>Foo</h2>
    <!-- navigation elements -->
  <nav>
  <main>
    <h2>Bar</h2>
    <!-- some elements -->
    <h1>This will send a warning</h1>
    <h2>Foo</h2>
    <!-- content elements -->
  <main>
</body>

@JoshTumath
Copy link
Author

Actually, thinking about this further, there may be many cases where you don't want the main heading (h1) to be in the main content. For example, on a homepage where there is no particular content, you may wish to put this in the header of the page.

@JoshTumath JoshTumath mentioned this issue Dec 12, 2018
Closed
6 tasks
@EmmaJP
Copy link
Contributor

EmmaJP commented Mar 6, 2019

I think this is falling into the remit of what meets guidelines and what could be considered good practice.

Here are the guidelines we look to:

  • WCAG AA - Headings and labels describe topic or purpose, and can be programmatically determined.
  • BBC MAG - Content has a logical and hierarchical heading structure.
  • BBC HTML guide - document has 1 h1, followed by sequential heading levels, each heading followed by content.

What we would expect:

  • Headings to be coded as headings (not only styled differently).
  • A single h1 per web page.
  • Headings following the h1 to be in sequential order with no skipped levels.
  • Some content to follow each heading, for which the heading is a suitably descriptive label. Content can include a lower level heading.

If the page has a main element (expected by the HTML guide) then the h1 should probably be the first heading within that main element, which should contain all the main content of the page that the h1 would be considered a label for. For BBC homepage or any index page the main content is usually the page banner with the h1 and the promos linking to other content.

If there are headings before the h1, they may be ignored when determining if headings after the h1 are "sequential". I would not want to encourage headings before the h1, but neither would I want to dictate what level of heading is or isn't OK before the h1.

@EmmaJP EmmaJP mentioned this issue Nov 12, 2019
Closed
@EmmaJP EmmaJP added the open-pr A PR is open for this issue label Nov 12, 2019
@github-actions
Copy link

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the Stale label Aug 12, 2023
@github-actions
Copy link

This issue was closed because it has been stalled for 5 days with no activity.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Aug 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jroebu14 jroebu14

Labels
effort-ok open-pr A PR is open for this issue seeking-assignee It would be great if someone would pick this up and work on it. Stale
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Allow first headings to be level 2 JoshTumath/bbc-a11y
3 participants
@JoshTumath @jroebu14 @EmmaJP