aria-posinset

Wann zu verwenden

Wenn der DOM nicht die vollständige Menge enthält — virtualisierte Listen, die nur sichtbare Einträge rendern, paginierte Raster, gefilterte Comboboxen oder Infinite-Scroll-Feeds. Ohne aria-posinset und aria-setsize muss der Screenreader die Position anhand der Geschwisteranzahl schätzen und kündigt „Eintrag 1 von 10“ an, obwohl sich die Nutzerin oder der Nutzer tatsächlich bei Eintrag 327 von 5.000 befindet.

Gültig auf Einträgen innerhalb von Containern, die von Natur aus mengenartig sind: option innerhalb von listbox, menuitem innerhalb von menu, treeitem innerhalb von tree, tab innerhalb von tablist, article innerhalb von feed, row innerhalb von grid.

Enthält der DOM alle Einträge in Quellreihenfolge, wird aria-posinset nicht benötigt — die assistive Technologie zählt die Geschwister automatisch.

Verhalten

Der Wert ist eine positive ganze Zahl — der 1-basierte Index dieses Eintrags innerhalb der vollständigen Menge. Er muss zusammen mit aria-setsize auf demselben Element angegeben werden; beide Attribute gehören auf die Einträge selbst, nicht auf den Container.

Bei gefilterten Einträgen sollten beide Attribute aktualisiert werden, um die sichtbare und relevante Menge widerzuspiegeln — nicht die ursprüngliche Gesamtliste. Andernfalls hören Nutzerinnen und Nutzer Positionen, die nicht mit dem übereinstimmen, zu dem sie navigieren können.

aria-setsize="-1" ist für Fälle gültig, in denen die Gesamtzahl tatsächlich unbekannt ist (ein offener Suche-während-der-Eingabe-Feed). Manche assistiven Technologien kündigen das als „viele“ an, andere schweigen.

Häufige Fehler

• aria-posinset ohne aria-setsize setzen. Die Hälfte der Information fehlt; assistive Technologien können nicht sagen „3 von wie vielen“.
• Vergessen, die Werte nach einem Sortier- oder Filtervorgang zu aktualisieren. Nutzerinnen und Nutzer hören veraltete Positionen.
• Die Attribute auf dem Container statt auf den Einträgen angeben.
• aria-posinset verwenden, wenn der DOM bereits die vollständige Menge abbildet — die assistive Technologie hätte korrekt gezählt, und nun gibt es zwei Wahrheitsquellen, die auseinanderlaufen können.
• Null oder negative Werte für aria-posinset (negative Werte sind nicht erlaubt; nur aria-setsize akzeptiert -1).
• Positionsnummern, die nicht der visuellen Reihenfolge entsprechen — eine Screenreader-Nutzerin oder ein -Nutzer liest „Eintrag 5“, während der dritte sichtbare Eintrag hervorgehoben ist.

Beispiel

<!-- Virtualisierte Listbox: nur Einträge 12–16 befinden sich im DOM, die Menge umfasst 5.000 Einträge -->
<div role="listbox" aria-label="Customers">
  <div role="option" aria-posinset="12" aria-setsize="5000">Customer 12</div>
  <div role="option" aria-posinset="13" aria-setsize="5000">Customer 13</div>
  <div role="option" aria-posinset="14" aria-setsize="5000" aria-selected="true">Customer 14</div>
  <div role="option" aria-posinset="15" aria-setsize="5000">Customer 15</div>
  <div role="option" aria-posinset="16" aria-setsize="5000">Customer 16</div>
</div>