Headings that appear before the h1 element cause warnings

JoshTumath commented 5 years ago

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

Version used: 2.2.6
Operating System and version: CentOS 6
Link to your project: https://github.com/bbc/childrens-responsive

EmmaJP commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.

EmmaJP commented 5 years ago

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.

github-actions[bot] commented 1 year ago

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[bot] commented 1 year ago

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

bbc / bbc-a11y