Warum Sie sich für den Abschnitt HTML5-Artikel entscheiden sollten

Vor ein paar Tagen unterhielt ich mich mit einigen Freunden, von denen mich einer nach dem Unterschied zwischen <article> und <section> in HTML fragte. Dies ist eines der ewigen Mysterien der Webentwicklung, gleichauf mit „Warum ist es Whitespace: Nowrap, nicht Whitespace: No-Wrap?“ und „Warum ist CSS ‚Grau‘ eine dunklere Farbe als ‚Dunkelgrau‘?“.

Ich gab meine übliche Antwort: Stellen Sie sich <article> nicht nur als Zeitungsartikel oder Blogbeitrag vor, sondern als Kleidungsstück – eine diskrete Einheit, die in einem anderen Kontext wiederverwendet werden kann. Ihre Hose ist also ein Artikel, und Sie können sie zu einem anderen Outfit tragen; Ihr Hemd ist ein Artikel und kann mit verschiedenen Hosen getragen werden; Ihre knielangen Stiletto-Stiefel aus Lackleder sind ein Artikel (Sie würden nicht nur einen davon tragen, oder?).

Die Spezifikation sagt:

„Das Artikelelement stellt eine vollständige oder in sich geschlossene Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Website dar und ist im Prinzip unabhängig verteilbar oder wiederverwendbar, z. B. in Syndication. Dies kann ein Forumsbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Blogeintrag, ein von einem Benutzer eingereichter Kommentar, ein interaktives Widget oder Gadget oder ein anderer unabhängiger Inhalt sein.“

Eine Homepage mit einer Liste von Blogbeiträgen wäre also ein <main> -Element, das eine Reihe von <article> -Elementen umschließt, eines für jeden Blogbeitrag. Sie würden die gleiche Struktur für eine Liste von Videos (denken Sie an YouTube) verwenden, wobei jedes Video in einen <article> wird, eine Liste mit Produkten (denken Sie an Amazon) und so weiter. Jeder dieser <article> s ist konzeptionell syndizierbar – jeder könnte alleine auf seiner eigenen dedizierten Seite stehen, in einer Anzeige auf einer anderen Seite, als Eintrag in einem RSS-Feed und so weiter.

Apples WatchOS enthält Reader, der das Element <article> verwendet, um den Hauptinhalt Ihrer Seite zu kennen. Apfel sagt:

„Wir haben Reader zu watchOS 5 gebracht, wo es automatisch aktiviert wird, wenn man Links zu textlastigen Webseiten folgt. Es ist wichtig sicherzustellen, dass Reader die wichtigsten Teile Ihrer Webseite hervorhebt, indem er semantisches Markup verwendet, um die Bedeutung und den Zweck von Elementen im Dokument zu verstärken. Lassen Sie uns ein Beispiel durchgehen. Zuerst geben wir an, welche Teile der Seite am wichtigsten sind, indem wir sie in ein Artikel-Tag einschließen.“

Die Kombination von <article> mit HTML5-Mikrodaten hilft Reader, die optimale Anzeige für kleine Uhrenbildschirme zu konstruieren:

„Insbesondere das Einschließen dieser Header-Elemente in den Artikel stellt sicher, dass sie alle in Reader erscheinen. Reader gestaltet auch jedes Header-Element unterschiedlich, abhängig vom Wert seines itemprop-Attributs. Mit itemprop können wir sicherstellen, dass Autor, Veröffentlichungsdatum, Titel und Untertitel gut sichtbar sind.“

Was ist also mit <Abschnitt>?

Mein üblicher Rat geht weiter: Kümmern Sie sich nicht um <section> oder machen Sie sich keine Gedanken darüber, wie es sich von <article> unterscheidet. Es wurde als generischer Wrapper für Überschriften erfunden, damit der Browser die Gliederung des HTML5-Dokuments bestimmen kann.

Das was? Der Dokumentgliederungsalgorithmus ist eine Möglichkeit, nur ein Überschriften-Tag – <h1> – zu verwenden und es auf magische Weise zur richtigen Überschriftenebene zu „verwandeln“ (z. B. in ein <h2> , <h3> usw. umzuwandeln), je nachdem, wie tief in HTML5-Abschnittselementen verschachtelt: <article> , <section> und so weiter.

Hier ist zum Beispiel, was Sie in Ihr CMS eingegeben haben:

 <h1>My Fabulous article</h1> <p>Lorem Ipsum Trondant Fnord</p>

Dies funktioniert hervorragend, wenn es als eigenständiger Artikel gezeigt wird. Aber was ist mit Ihrer Homepage, die eine Liste Ihrer neuesten Artikel ist?

 <h1>My latest posts</h1> <article> <h1>My fabulous article</h1> <p>Lorem Ipsum Trondant Fnord</p> </article> <article> <h1>Another magnum opus</h1> <p>Magnum solero paddle pop</p> </article>

In diesem Beispiel werden gemäß der Spezifikation die <h1> s innerhalb der <article> -Elemente zu logischen <h2> s, da <article> wie <section> ein Abschnittselement ist .

Hinweis : Dies ist keine neue Idee. Bereits 1991 schrieb Sir Onkel Timbo:

„Ich würde es tatsächlich vorziehen, anstelle von <h1> , <h2> usw. für Überschriften [die aus der AAP-DTD stammen] ein verschachtelbares <SECTION> ... </SECTION> -Element und ein generisches <H> ... </H> was auf jeder Ebene innerhalb der Abschnitte die erforderliche Überschriftenebene erzeugen würde.“

Leider implementiert jedoch kein Browser HTML5-Gliederung, sodass es keinen Sinn macht, <section> zu verwenden. An einem Punkt versuchte der JAWS-Bildschirmleser, den Dokumentgliederungsalgorithmus (in IE, aber nicht in Firefox) zu implementieren, implementierte ihn jedoch fehlerhaft. Es scheint, dass Browser-Entwickler einfach nicht interessiert sind (mehr schmutzige Details im Abschnitt „Weiterführende Literatur“ für echte Anoraks).

„Aber“, warf ein anderer Freund in das Gespräch ein, „je nachdem, wie tief das <h1> in <section> s verschachtelt ist, zeigen Browser jetzt unterschiedliche Schriftgrößen an“, und bewiesen es weiter. Verblüfft!

Hier ist eine ähnliche Demo. Die linke Spalte zeigt vier in Abschnitte verschachtelte <h1> s; die rechte Spalte zeigt a, <h1> , <h2> , <h3> , <h4> ohne Verschachtelung. Der Firefox-Screenshot zeigt, dass die verschachtelten <h1> s standardmäßig dieselbe Schriftart verwenden wie die traditionellen <h1> … <h4> -Tags:

Die Ergebnisse sind in Chrome, Chromium-Derivaten wie Edge Beta für Mac und Safari auf Mac gleich.

Bedeutet dies also, dass wir alle damit anfangen sollten, <h1> als unser einziges Überschriftenelement zu verwenden und es in <section> s zu verschachteln?

Nein. Denn dies ist nur eine optische Veränderung des h1s. Wenn wir den Firefox Accessibility Inspector in devtools öffnen, können wir sehen, dass der Text „Level 2“ so gestaltet ist, dass er wie ein H2 aussieht, aber immer noch auf „Level 1“ gesetzt ist – der Accessibility Tree wurde nicht auf Level geändert 2.

Vergleichen Sie dies mit dem Real H2 in der rechten Spalte:

Dies zeigt, dass der Barrierefreiheitsbaum korrekt darüber informiert wurde, dass dies eine Überschrift der Ebene 2 ist. Tatsächlich hat Mozilla versucht, die berechnete Ebene an den Barrierefreiheitsbaum zu übermitteln:

„Wir haben ein bisschen damit experimentiert … mussten es aber rückgängig machen, weil sich Leute in unserem a11y-Team über zu viele Regressionen beschwerten (versehentliches Absenken der <h1> -Werte und so weiter).“

Für Benutzer von Hilfstechnologien ist eine ordnungsgemäße Hierarchie der Überschriften von entscheidender Bedeutung. Wie die achte Benutzerumfrage zu WebAIM-Screenreadern zeigt,

„Die Nützlichkeit angemessener Überschriftenstrukturen ist sehr hoch, wobei 86,1 % der Befragten Überschriftenebenen sehr oder einigermaßen nützlich finden.“

Daher sollten Sie weiterhin <h1> bis <h6> verwenden und den section ignorieren.

Sag niemals nie

„Aber…“, werden Sie jetzt vielleicht empört stottern, „genau auf dieser Seite ist ein <section> -Element!“. Und Sie haben recht, lieber Leser. Die „Kurzzusammenfassung“ ist aus Gründen der Barrierefreiheit in einen <section> eingeschlossen. Als Screenreader-Benutzerin Leonie Watson ihr Webinar „Wie eine Screenreader-Benutzerin auf das Web zugreift“ hielt, wies sie auf einen Bereich hin, in dem das Markup von Smashing Magazine optimiert werden könnte, um ihr Erlebnis zu verbessern.

Wie Sie auf dem Screenshot sehen können, geht Smashing-Artikeln eine kurze Zusammenfassung voraus, gefolgt von einer horizontalen Linie, die die Zusammenfassung vom eigentlichen Artikel trennt.

Aber das Trennzeichen ist rein dekorativ, daher konnte Leonie nicht erkennen, wo die Zusammenfassung endet und der Artikel beginnt. Sie schlug eine Lösung vor: Wir haben die Zusammenfassung in ein <section> -Element verpackt:

 <section aria-label="quick summary"> Summary text </section>

In den meisten Screenreadern wird ein <section> -Element nicht angesagt, es sei denn, es hat einen zugänglichen Namen . In diesem Fall der Text der Arienbezeichnung. Jetzt kündigte ihr Screenreader „Quick Summary Region“ und nach der Zusammenfassung „Quick Summary Region End“ an. Dieses einfache Markup ermöglicht es einem Screenreader-Benutzer auch, über die Zusammenfassung zu springen, wenn er möchte.

Wir hätten ein einfaches <div> verwenden können, aber dann, wie Marco Zehe schreibt,

„Als Faustregel gilt: Wenn Sie etwas mit aria-label oder aria-labelledby kennzeichnen, stellen Sie sicher, dass es eine geeignete Widget- oder Landmark-Rolle hat.“

Anstatt also <div role=”region” aria-label=”quick summary”> zu verwenden, haben wir uns für <section> entschieden, da dies eine eingebaute Rolle der Region hat und Bruces unfehlbares ARIA-Gesetz gilt: eingebaute Beats an. Groß.

Fazit

Hoffentlich sind Sie mit diesen Take-Homes davongekommen:

• Verwenden Sie nicht viele <h1> s. Machen Sie <h1> zur Hauptüberschrift Ihrer Seite und verwenden Sie dann <h2> , <h3> , <h4> usw. in einer richtigen Hierarchie, ohne Ebenen zu überspringen.
• <section> kann mit aria-label verwendet werden, um einem Screenreader-Benutzer zu signalisieren, wo ein bestimmter Unterabschnitt eines Artikels beginnt und endet. Andernfalls vergessen Sie es oder verwenden Sie ein anderes Element wie <aside aria-label=”quick summary”> oder <div role=”region” aria-label=”quick summary”> .
• <main> , <header> , <footer> und <nav> sind sehr nützlich für Screenreader-Benutzer und völlig transparent für diejenigen, die keine Hilfstechnologien verwenden. Also benutze sie.
• <article> ist nicht nur für Blog-Posts – es ist für jede eigenständige Sache. Es hilft WatchOS auch dabei, Ihre Inhalte richtig anzuzeigen.

Ich danke Leonie Watson für ihre Hilfe beim Schreiben dieses Artikels. Alle Fehler sind allein ihre Schuld.

Weiterführende Lektüre

• „Überschriften und Abschnitte“, HTML 5.2 W3C-Empfehlung (14. Dez. '17) Beachten Sie die Warnung: „Derzeit sind keine nativen Implementierungen des Gliederungsalgorithmus bekannt … Daher kann man sich nicht darauf verlassen, dass der Gliederungsalgorithmus den Benutzern die Dokumentstruktur vermittelt. Autoren sollten den Rang der Überschrift (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.“
• „There Is No Document Outline Algorithm“, Adrian Roselli Alle blutigen Details darüber, wie sich die Spezifikation für den Abschnittsalgorithmus geändert hat.
• „ARIA in HTML“, W3C-Editor's Draft (19. Dez. '19) Regeln, an die Sie sich halten sollten, wenn Sie ARIA-Rollen und -Attribute zu HTML hinzufügen.
• Der praktische Wert von semantischem HTML“, Bruce Lawson Mein eigener Artikel, in dem auf Einzelheiten zur Verwendung von HTML5 und Mikrodaten durch WatchOS verwiesen wird.