3

In my web app I have a header bar that is both the app's breadcrumbs as well as the heading for the current page.

So in the header you will see:

App Name > Section Name > Current Page

Where "current page" is the H1 tag for the page.

Does this make sense from an accessibility (ARIA rules) standpoint?

Here is what my code looks like:

<header class="route__header">
  <nav aria-label="Breadcrumb" class="crumbs">
    <a href="" class="crumbs__link">App Name</a>
    <a href="" class="crumbs__link">Section Name</a>
    <h1 aria-current="page" class="crumbs__link crumbs__link--active">Current Page Name</h1>
  </nav>
</header>

The reason for this is so I have the one H1 tag per page, and then the content can have H2 and lower.

OR should I leave the current page as just a span tag, and allow multiple H1 tags within the content?

Improve this question

2 Answers 2

Reset to default
4

A heading inside a section belongs to this section. The nav element creates such a section. This means that "Current Page Name" is the heading for the navigation, not for the page. But that would be wrong, of course (a navigation’s heading, if it has one, could be something like "Navigation").

Whether or not this creates an actual accessibility problem is impossible to tell (users might use tools that make use of the outline, possibly even custom ones). But even if doesn’t affect accessibility currently, you shouldn’t go against the spec (unless you have good reason to do so).

(By the way, for accessibility, you should either provide textual delimiters for the breadcrumb items, or use markup like ol.)

It’s possible to implement what you want to achieve in a spec-conforming way, if you don’t use nav, e.g.:

<body>

  <header>
    <a href="">App Name</a> → <a href="">Section Name</a> →
    <h1>Current Page Name</h1>
  </header>

</body>

But the conventional way would be not to integrate the page heading in the breadcrumbs: either by duplicating the label for the current page (having it in the heading and in the breadcrumbs), or by omitting the breadcrumb item for the current page.

Improve this answer
3

I would avoid putting a <h1> in the navigation as I think some screen readers may interpret it as being the heading for the navigation rather than the page as a whole. I would also recommend that you structure your breadcrumb as an ordered list (or at the very least an unordered list) as the W3C describes a breadcrumb trail as "a list of links to the parent pages of the current page in hierarchical order" and an ordered list would semantically demonstrate this hierarchy to screenreaders. The W3C also has a tutorial that seems to confirm this view.

User agents do not yet support the HTML 5 document outline: (See There is No Document Outline), Therefore you are better off putting your H1 in your header and using H2 headings and lower in your main content. Here's an example:

<header class="route__header">
<h1>Current page name</h1>
  <nav aria-label="Breadcrumb" class="crumbs">
    <ol>
    <li><a href="" class="crumbs__link">App Name</a></li>
    <li><a href="" class="crumbs__link">Section Name</a></li>
    <li class="crumbs__link crumbs__link--active">Current Page Name</li></ol>
  </nav>
</header>

<article>
<h2>Article heading</h2>
<h3>Article sub-heading</h3>
</article>

Improve this answer
4
  • Why is the last link in your answer to a draft of HTML5 that's nearly seven years out of date?
    – Alohci
    Commented Feb 24, 2018 at 11:29
  • Thanks for highlighting. I've updated the link now but I think the principles from the draft from 2011 still apply. What would you suggest as an alternative?
    – Robert Salmon
    Commented Feb 24, 2018 at 15:08
  • 2
    The principles of the 2011 draft don't really apply. I strongly encourage you to read "There Is No Document Outline Algorithm" which explains why the promise of H1 for each section heading was never fulfilled.
    – Alohci
    Commented Feb 24, 2018 at 16:48
  • Thanks Alohci. I have updated my answer accordingly.
    – Robert Salmon
    Commented Feb 24, 2018 at 22:30

Not the answer you're looking for? Browse other questions tagged or ask your own question.