ARIA: article-Rolle
Die article
-Rolle kennzeichnet einen Abschnitt einer Seite, der leicht für sich allein auf einer Seite, in einem Dokument oder auf einer Website bestehen könnte. Sie wird normalerweise auf verwandte Inhaltselemente wie Kommentare, Forenbeiträge, Zeitungsartikel oder andere Elemente gesetzt, die auf einer Seite gruppiert sind.
<div role="article">
<h2>Heading of the segment</h2>
<p>Paragraph for the segment.</p>
<p>Another paragraph.</p>
Controls to interact with the article, share it, etc.
</div>
<div role="article">…</div>
Dieses Beispiel zeigt zwei Artikel nebeneinander auf einer Seite, die ähnlich strukturiert sind und in Beziehung zueinander stehen.
Hinweis: Anstelle eines <div>
mit einer article
-Rolle sollte das <article>
-Element verwendet werden. Immer das native Element verwenden, wenn verfügbar
Verwenden Sie nicht role="article"
. Stattdessen verwenden Sie das <article>
-Element.
<article>
<h2>Heading of the segment</h2>
<p>Paragraph for the segment.</p>
<p>Another paragraph.</p>
Controls to interact with the article, share it, etc.
</article>
<article>…</article>
Beschreibung
Die article
-Rolle Dokumentenstruktur-Rolle bezeichnet einen Abschnitt eines Dokuments, einer Seite oder einer Site, der, wenn er allein stehen würde, als vollständiges Dokument, Seite oder Site betrachtet werden könnte. Das Ziel einer Reihe von Artikelsektionen ist es, ihre Beziehung zueinander zu kennzeichnen.
Artikel werden nicht als navigationales Landmark betrachtet, aber viele unterstützende Technologien, die Landmarks unterstützen, bieten auch eine Möglichkeit zur Navigation zwischen Artikeln. Sie können auch die Darstellung von Verschachtelungsbeziehungen innerhalb von Artikeln unterstützen.
Artikel können verschachtelt werden, was bedeutet, dass ein verschachtelter Artikel direkt Bezug zu dem Artikel hat, in dem er verschachtelt ist, aber nicht unbedingt zu denen außerhalb der Verschachtelungshierarchie. Nehmen Sie Bezug auf die Beispiele für spezifische Anwendungsfälle.
Wenn ein Artikel Teil eines Feeds ist, können die Attribute aria-posinset
und aria-setsize
festgelegt werden, um anzuzeigen, welche Position innerhalb des Feeds dieser bestimmte Artikel einnimmt.
Innerhalb einer application
oder eines anderen Widgets, das bei Screenreadern und anderen unterstützenden Technologien den Pass-Through-Modus verursacht, kann ein Artikel verwendet werden, um anzuzeigen, dass diese wieder anfangen sollten, den eingeschlossenen Inhalt als regulären Webinhalt zu behandeln.
Anstelle der Verwendung der article
-Rolle auf einem nicht-semantischen Element sollte das <article>
-Element verwendet werden. Nutzeragenten übersetzen dies in die entsprechende Zugänglichkeitsinformation genauso wie die article
-Rolle. Die Verwendung des <article>
-Elements hilft auch Suchmaschinen, die Struktur einer Seite besser zu entdecken. Beispiele für geeignete Verwendungen von role="article"
, oder vorzugsweise <article>
, sind Blogposts, Forenbeiträge, ein Kommentar zu einem Forum oder Blogpost, ein Element in einem sozialen Medien-Feed.
Zugehörige WAI-ARIA-Rollen, Zustände und Eigenschaften
aria-posinset
-
Im Kontext eines Feeds gibt an, welche Position dieser bestimmte Artikel innerhalb dieses Feeds einnimmt, basierend auf einer Zählung beginnend bei 1.
aria-setsize
-
Im Kontext eines Feeds gibt an, wie viele Artikelpunkte es innerhalb dieses Feeds gibt.
Tastatur-Interaktionen
Diese Rolle unterstützt keine spezifischen Tastaturinteraktionen.
Erforderliche JavaScript-Funktionen
- Ereignishandler
-
Diese Rolle erfordert keine Ereignishandler.
- Ändern von Attributwerten
-
Beim Erstellen eines Feeds setzen Sie die
aria-posinset
- undaria-setsize
-Attribute an jeder Artikelrolle auf die entsprechenden Werte, wobei zu beachten ist, dassaria-posinset
bei 1 beginnt.
Hinweis: Immer das native Element verwenden, wenn verfügbar. Anstelle eines <div>
mit der article
-Rolle sollte das <article>
-Element verwendet werden.
Beispiele
- Die Anzeigedarstellung von Restaurantempfehlungen im Feed zusammen mit der separaten Dokumentation aus dem WAI-ARIA 1.1 Autorenschaftspraxis-Feed-Designmuster
Spezifikationen
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # article |
Unknown specification |
Reihenfolge der Vorrangigkeit
Siehe auch
feed
Rollesection
Rolle- Das
<article>
-Element - RSS Glossar-Definition