ARIA: main role
Die main 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 zusammenhängen oder diese erweitern.
<div id="main" role="main">
<h1>Avocados</h1>
<!-- main section content -->
</div>
Dies ist der Hauptteil eines Dokuments, das Avocados behandelt. Unterabschnitte dieses Dokuments könnten ihrer Geschichte, den verschiedenen Sorten, den Regionen, in denen sie wachsen, usw. gewidmet sein.
Beschreibung
Die main Rolle ist eine Landmarke, die den Hauptinhalt eines Dokuments identifiziert. Landmarks können von Unterstützungstechnologien wie Screenreadern verwendet werden, um schnell große Abschnitte des Dokuments zu identifizieren und zu navigieren.
Durch die Klassifizierung und Etikettierung von Abschnitten einer Seite kann die strukturelle Information, die visuell durch das Layout übermittelt wird, programmatisch dargestellt werden. Screenreader verwenden Landmark-Rollen, um eine Tastaturnavigation zu wichtigen Abschnitten einer Seite bereitzustellen. Für diejenigen, die über Landmark-Rollen navigieren, ist die main Rolle eine Alternative zu Links wie "Zum Hauptinhalt springen".
Es sollte nur eine main Landmark-Rolle pro Dokument geben.
Das <main> Element hat die Rolle main. Entwickler sollten bevorzugt semantisches HTML verwenden – in diesem Fall <main> – anstatt ARIA zu nutzen.
Zugehörige ARIA-Rollen, Zustände und Eigenschaften
aria-owns-
Das
aria-ownsAttribut stellt Beziehungen in der Barrierefreiheitsschicht her, die im DOM nicht vorhanden sind. Dokumente und Anwendungen können im DOM verschachtelt sein, was dazu führen kann, dass es mehr als ein main Element als DOM-Nachkommen gibt. Wenn dies der Fall ist, fügen Siearia-ownshinzu, um die Beziehung des main zu seinem Dokument- oder Anwendungs-Vorfahren zu identifizieren. aria-labeloderaria-labelledby-
Identifizieren Sie den zugänglichen Namen mit
aria-labelledby, wenn ein sichtbarer Header vorhanden ist. Andernfalls kann das Hinzufügen einesaria-labelhilfreich sein, um Benutzer von Unterstützungstechnologien zu orientieren, insbesondere in Single-Page-Anwendungen, in denen Hauptinhaltsänderungen stattfinden, ohne dass ein Seitenladeereignis generiert wird.
Beispiel
<body>
<!-- primary navigation -->
<div role="main">
<h1>The First Indochina War</h1>
<!-- article content -->
</div>
<!-- sidebar and footer -->
</body>
Barrierefreiheitsbedenken
Verwenden Sie nur eine main Rolle pro Dokument
Die main Landmark-Rolle sollte nur einmal pro Dokument verwendet werden.
Wenn ein Dokument zwei main Rollen enthält, beispielsweise wenn Seiteninhalte durch JavaScript aktualisiert werden, sollte die Anwesenheit der inaktiven main Rolle von Unterstützungstechnologien entfernt werden, indem Techniken wie das Umschalten des hidden Attributs verwendet 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 Unterstützungstechnologien zu helfen, sich zu orientieren, insbesondere in Single-Page-Anwendungen, in denen Hauptinhaltsänderungen ohne Generierung eines Seitenladeereignisses stattfinden. Dies kann mit aria-labelledby hinzugefügt werden, wenn ein geeigneter Name im Inhalt vorhanden ist, oder aria-label, wenn nicht.
Beste Praktiken
Bevorzugen Sie HTML
Durch die Verwendung des <main> Elements wird automatisch kommuniziert, dass das Element die Rolle main hat. Wenn möglich, bevorzugen Sie die Verwendung des semantischen <main> Elements anstelle der main Rolle.
Navigation überspringen
Navigation überspringen, auch bekannt als "skipnav", ist eine Technik, die es einem Benutzer von Unterstützungstechnologien ermöglicht, schnell große Abschnitte von wiederholtem Inhalt (Hauptnavigation, Informationsbanner usw.) zu überspringen. Auf diese Weise kann der Benutzer schneller auf den Hauptinhalt der Seite zugreifen.
Das Hinzufügen eines id Attributs zu dem Element mit einer Deklaration von role="main" ermöglicht es, dass es das Ziel eines Link zum Überspringen der Navigation für Benutzer ist.
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<div id="main-content" role="main">
<!-- main page content -->
</div>
</body>
Was dem Äquivalent von entspricht:
<body>
<a href="#main-content">Skip to main content</a>
<!-- navigation and header content -->
<main id="main-content">
<!-- main page content -->
</main>
</body>
Spezifikationen
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # main |
| Unknown specification |