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?
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.