Sektionierungselemente teilen eine Seite in sinnvolle Bereiche auf. Mehrere von ihnen bilden ARIA Landmarks — benannte Bereiche, zwischen denen Hilfstechnologien Benutzern springen lassen können, wie ein Inhaltsverzeichnis für die Seite.
...
Details
...
...
Benutzer von Bildschirmleseprogrammen können eine Taste drücken, um Landmarks aufzulisten und direkt zu <main> zu springen, wobei wiederholte Header und Navigation übersprungen werden. Dies ist ein großer Effizienzgewinn — die semantischen Tags bieten dies automatisch, kein ARIA erforderlich.
<article> — Inhalte, die eigenständig sinnvoll sind und syndiziert werden könnten: ein Blogbeitrag, eine Produktkarte, ein Kommentar.<section> — eine thematische Gruppierung innerhalb eines Dokuments, normalerweise mit eigener Überschrift. Nicht eigenständig.<article>
<h1>Blog post title</h1>
<section><h2>Introduction</h2>...</section>
<section><h2>Conclusion</h2>...</section>
</article>
Faustregel: Wenn es eigenständig bestehen könnte, ist es ein <article>; wenn es nur ein benannter Teil eines größeren Ganzen ist, ist es ein <section>. Verwenden Sie <section> nicht nur als Styling-Wrapper — dafür gibt es <div>.
Die Verwendung der richtigen Sektionierungselemente bietet dir kostenlose, robuste Landmarks für Tastatur-/Bildschirmleser-Navigation und eine klare Dokumentstruktur – zur Verbesserung der Barrierefreiheit und SEO ohne zusätzliche ARIA-Attribute.