HTML5 article tag: pre article content?

Question

My question is probably based on a bad design. However, I can't change that and need to work with it. This is the visual draft I'm talking about, it's just a part of a full website:

As you can see there's a title of an article with a background image, then a breadcrumb toolbar and finally, the articles content. Now, usually, if there wouldn't be the breadcrumb toolbar you could simply wrap it into an <article> . But the breadcrumb divides the article in a "pre" article and a main article part. The only "clean" HTML5 way would be to wrap the article including the header with background image into an <article> and position the breadcrumb into the target visual position. However, I'm classifying this as "hack" and I'm searching a better way.

What would be the preferred markup for this scenario?

Answer 1

There won't be any perfect the solution for the current requirement.

As pointed out by comments to the previous answer, the nav is not related to the article.

Also, WCAG instructs that :

1.3.2 Meaningful Sequence : When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined. (Level A)

EDIT : If changing the order of the element can preserve a meaningful sequence ( G57 ), when the elements does not match visually the DOM order ( see C27 ) the visual focus indicator of the screen reader will not match the standard reading order which will result in bad UX for people with low vision using a screenreader.

So it's impossible to try a CSS visual hack to invert the order between the elements visually without breaking another rule.

You may think of a third technique :

• set aria-hidden on the visible title,
• use aria-labelledby on the article tag to point to the h1 outside the article element :

For instance:

 <header>
     <h1 aria-hidden="true" id="title">Your title</h1>
     <nav><!-- nav here --></nav>
 </header>

 <article aria-labelledby="title">
     // article here
 </article>

Another way to do is to duplicate the title element, one visible, one for assistive technology

 <header>
     <div aria-hidden="true">Your title</div>
     <nav><!-- nav here --></nav>
 </header>

 <article>
     <h1 class="sr-only">Your title</h1>
     // article here
 </article>

Answer 2

It could be something like this -

<article>
    <header>
        //APPLY BACKGROUND IMAGE
        <h1>YOUR TITLE</h1>
    </header>

    <nav>
        //USE BREADCRUMBS HERE
    </nav>

    <section>
        //USE THIS FOR CONTENT
    </section>
</article>