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?