Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
ARIA: Rolle main
Diemain-Landmark-Rolle wird verwendet, um den Hauptinhalt eines Dokuments anzuzeigen. Der Hauptinhaltsbereich besteht aus Inhalten, die direkt mit dem zentralen Thema eines Dokuments oder der Hauptfunktion einer Anwendung in Verbindung stehen oder dieses erweitern.
<div role="main"> <h1>Avocados</h1> <!-- main section content --></div>Dies ist der Hauptbereich eines Dokuments, das Avocados behandelt. Unterabschnitte dieses Dokuments könnten ihre Geschichte, die verschiedenen Arten, Regionen, in denen sie wachsen, usw. behandeln.
Beschreibung
Diemain-Rolle ist eine navigationsbezogenelandmark-Rolle, die den Hauptinhalt eines Dokuments identifiziert. Landmarken können von unterstützenden Technologien wie Screenreadern verwendet werden, um schnell große Abschnitte des Dokuments zu identifizieren und zu navigieren.
Durch die Klassifizierung und Kennzeichnung von Seitenabschnitten kann strukturelle Information, die visuell durch das Layout vermittelt wird, programmatisch dargestellt werden. Screenreader verwenden Landmarken-Rollen, um die Tastaturnavigation zu wichtigen Abschnitten einer Seite bereitzustellen. Für diejenigen, die über Landmarken-Rollen navigieren, bietet diemain-Rolle eine Alternative zu Links wie "zum Hauptinhalt springen".
Es sollte nur einemain-Landmark-Rolle pro Dokument geben.
Das<main>-Element hat die Rollemain. Entwickler sollten semantisches HTML verwenden — in diesem Fall<main> — anstatt ARIA zu verwenden.
Zugehörige ARIA-Rollen, Zustände und Eigenschaften
aria-ownsDas
aria-owns-Attribut stellt in der Barrierefreiheits-Schicht Beziehungen her, die im DOM nicht vorhanden sind. Dokumente und Anwendungen können im DOM verschachtelt sein, was dazu führen kann, dass mehr als ein Hauptelement als DOM-Nachfahren vorhanden ist. In diesem Fall sollten Siearia-ownseinfügen, um die Beziehung des Hauptinhalts zu seinem Dokument- oder Anwendungs-Ahn zu identifizieren.aria-labeloderaria-labelledbyIdentifizieren Sie den zugänglichen Namen mit
aria-labelledby, wenn ein sichtbarer Header vorhanden ist. Andernfalls kann das Einfügen einesaria-labelhilfreich sein, um Benutzern von unterstützender Technologie, insbesondere in Einzelseiten-Anwendungen, Orientierung zu bieten, in denen Änderungen des Hauptinhalts ohne das Auslösen eines Seitenladeereignisses stattfinden.
Beispiel
<body> <!-- primary navigation --> <div role="main"> <h1>The First Indochina War</h1> <!-- article content --> </div> <!-- sidebar and footer --></body>Barrierefreiheitsbedenken
Verwenden Sie nur einemain-Rolle pro Dokument
Diemainlandmark role sollte nur einmal pro Dokument verwendet werden.
Wenn ein Dokument zweimain-Rollen enthält, sagen wir beim Aktualisieren der Seiteninhalte, die durch JavaScript ausgelöst werden, sollte die Anwesenheit der inaktivenmain-Rolle durch Techniken wie das Umschalten deshidden-Attributs von assistierenden Technologien entfernt werden.
<main> <h1>Active `main` element</h1> <!-- content --></main><main hidden> <h1>Hidden `main` element</h1> <!-- content --></main>Es ist auch hilfreich, einen zugänglichen Namen hinzuzufügen, um Benutzern von assistierender Technologie Orientierung zu bieten, insbesondere in Einzelseiten-Anwendungen, in denen Änderungen des Hauptinhalts ohne das Auslösen eines Seitenladeereignisses stattfinden. Dies kann mitaria-labelledby hinzugefügt werden, falls ein passender Name im Inhalt vorhanden ist, oderaria-label, wenn nicht.
Best Practices
Bevorzugen Sie HTML
Die Verwendung des<main>-Elements wird automatisch kommunizieren, dass das Element die Rollemain hat. Wenn möglich, ziehen Sie es vor, das semantische<main>-Element anstelle dermain-Rolle zu verwenden.
Navigation überspringen
Das Überspringen der Navigation, auch bekannt als "skipnav", ist eine Technik, die es einem Benutzer von unterstützender Technologie ermöglicht, große Abschnitte von sich wiederholendem Inhalt (Hauptnavigation, Info-Banner etc.) schnell zu umgehen. Dies ermöglicht dem Benutzer, schneller auf den Hauptinhalt der Seite zuzugreifen.
Das Hinzufügen einesid-Attributs zu dem Element mit der Deklarationrole="main" ermöglicht es, Ziel eines Skip-Navigations-Links zu sein, den Nutzer verwenden können.
<body> <a href="#main-content">Skip to main content</a> <!-- navigation and header content --> <div role="main"> <!-- main page content --> </div></body>Das ist gleichwertig mit:
<body> <a href="#main-content">Skip to main content</a> <!-- navigation and header content --> <main> <!-- main page content --> </main></body>Spezifikationen
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # main |
| Unknown specification |