Propriété État du widget

`aria-posinset`

Position d'un élément dans un ensemble lorsque le DOM ne peut pas l'exprimer — notamment en cas de virtualisation, pagination ou filtrage. À toujours associer à aria-setsize pour que les lecteurs d'écran puissent annoncer « 3 sur 47 ».

Quand l’utiliser

Lorsque le DOM ne contient pas l’ensemble complet — listes virtualisées qui ne rendent que les éléments visibles, grilles paginées, comboboxes filtrées, flux à défilement infini. Sans aria-posinset et aria-setsize, le lecteur d’écran doit deviner d’après le nombre de frères et sœurs et annoncera « élément 1 sur 10 » alors que l’utilisateur est en réalité sur l’élément 327 sur 5 000.

Valide sur les éléments à l’intérieur de conteneurs intrinsèquement ensemblistes : option dans listbox, menuitem dans menu, treeitem dans tree, tab dans tablist, article dans feed, row dans grid.

Si le DOM contient naturellement tous les éléments dans l’ordre source, aria-posinset n’est pas nécessaire ; la technologie d’assistance compte les frères et sœurs automatiquement.

Comportement

La valeur est un entier positif — l’index basé sur 1 de cet élément dans l’ensemble complet. Associez-le à aria-setsize sur le même élément ; les deux attributs appartiennent aux éléments eux-mêmes, pas au conteneur.

Lorsque des éléments sont filtrés, mettez à jour les deux attributs pour refléter l’ensemble visible et pertinent, et non la liste complète d’origine. Sinon les utilisateurs entendent des positions qui ne correspondent pas à ce qu’ils peuvent atteindre.

aria-setsize="-1" est valide pour les cas où le total est réellement inconnu (un flux de recherche en temps réel sans fin). Certaines technologies d’assistance annoncent cela comme « plusieurs » ; d’autres restent silencieuses.

Échecs courants

Définir aria-posinset sans aria-setsize. La moitié de l’information manque ; la technologie d’assistance ne peut pas dire « 3 sur combien ».
Oublier de mettre à jour les valeurs après un tri ou un filtrage. Les utilisateurs entendent des positions périmées.
Placer les attributs sur le conteneur plutôt que sur les éléments.
Utiliser aria-posinset alors que le DOM reflète déjà l’ensemble complet — la technologie d’assistance allait compter correctement de toute façon, et vous avez maintenant deux sources de vérité qui peuvent diverger.
Valeurs nulles ou négatives pour aria-posinset (les négatifs ne sont pas autorisés ; seul aria-setsize accepte -1).
Des numéros de position qui ne correspondent pas à l’ordre visuel — un utilisateur de lecteur d’écran lit « élément 5 » alors que c’est le troisième élément visible qui est mis en évidence.

Exemple

<!-- Listbox virtualisée : seuls les éléments 12 à 16 sont dans le DOM, mais l'ensemble compte 5 000 entrées -->
<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>