HTML5 Artikel Tag: Pre Artikel Inhalt?

Question

Meine Frage basiert wahrscheinlich auf einem schlechten Design. Das kann ich aber nicht ändern und muss damit arbeiten. Dies ist der visuelle Entwurf ich rede, es ist nur ein Teil einer vollständigen Website:

Wie Sie einen Titel eines Artikels gibt es mit einem Hintergrundbild sehen können, dann eine Brotkrümel Symbolleiste und schließlich , der Inhalt der Artikel. Wenn die Breadcrumb-Symbolleiste nicht vorhanden wäre, könnten Sie sie einfach in eine <article> einfügen. Aber der Breadcrumb teilt den Artikel in einen "Pre" -Artikel und einen Hauptartikelteil. Die einzige "saubere" HTML5-Methode wäre, den Artikel einschließlich der Kopfzeile mit Hintergrundbild in eine <article> einzubinden und den Breadcrumb in die visuelle Zielposition zu positionieren. Allerdings klassifiziere ich dies als "Hack" und ich suche einen besseren Weg.

Was wäre der bevorzugte Markup für dieses Szenario?

Answer 1

Es wird keine perfekte Lösung für die aktuelle Anforderung sein.

Wie von Kommentaren auf die vorherige Antwort hingewiesen, ist die nav nicht mit dem Artikel verwandt. Auch

, weist WCAG dass:

1.3.2 Meaningful Sequence: Wenn die Reihenfolge, in der die Inhalte dargestellt wird seine Bedeutung betrifft, eine richtige Lesereihenfolge kann durch Software bestimmt werden. (Stufe A)

EDIT: die Reihenfolge des Elements Wenn ändernden kann eine sinnvolle Sequenz (G57) bewahren, wenn die Elemente nicht mit visuell der DOM Ordnung (see C27) die visuellen Fokusanzeige des Bildschirmlesers entspricht nicht der Standard-Lesereihenfolge, was zu schlechtem UX für Personen mit Sehschwäche führt, die einen Bildschirmleser verwenden.

So ist es unmöglich, einen visuellen CSS-Hack zu versuchen, um die Reihenfolge zwischen den Elementen visuell zu invertieren, ohne eine andere Regel zu brechen.

Sie von einer dritten Technik denken kann:

• aria-hidden auf dem sichtbaren Titelsatz,
• Verwendung aria-labelledby auf den article Tag die h1 außerhalb des article Element zu zeigen:

Zum Beispiel:

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

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

Ein anderer Weg ist zu tun, um das Titelelement zu duplizieren, ein sichtbaren,

ein für unterstützende Technologie

<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

Es könnte so etwas wie diese -

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

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

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