Masquer du contenu aux technologies d'assistance
aria-caché
Une autre technique importante pour affiner l'expérience des utilisateurs de technologies d'assistance consiste à s'assurer que seules les parties pertinentes de la page sont exposées à la technologie d'assistance. Il existe plusieurs façons de s'assurer qu'une section du DOM n'est pas exposée aux API d'accessibilité.
Tout d'abord, tout élément explicitement masqué pour le DOM n'est pas non plus inclus dans l'arborescence d'accessibilité. Ainsi, tout ce qui a un style CSS visibility:
hidden
ou display: none
, ou qui utilise l'attribut HTML5 hidden
sera également masqué pour les utilisateurs de technologies d'assistance.
Toutefois, un élément qui n'est pas affiché visuellement, mais qui n'est pas explicitement masqué, est tout de même inclus dans l'arborescence d'accessibilité. Une technique courante consiste à inclure du "texte uniquement destiné aux lecteurs d'écran" dans un élément situé hors de l'écran.
.sr-only {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
De plus, comme nous l'avons vu, il est possible de fournir du texte uniquement destiné aux lecteurs d'écran via un attribut aria-label
, aria-labelledby
ou aria-describedby
, qui fait référence à un élément masqué.
Consultez l'article WebAIM Techniques de masquage du texte pour en savoir plus sur la création d'un texte de type "lecteur d'écran uniquement".
Enfin, ARIA fournit un mécanisme permettant d'exclure du contenu des technologies d'assistance qui n'est pas masqué visuellement, à l'aide de l'attribut aria-hidden
.
L'application de cet attribut à un élément le supprime de l'arborescence d'accessibilité, ainsi que tous ses descendants. Les seules exceptions sont les éléments désignés par un attribut aria-labelledby
ou aria-describedby
.
<div class="deck">
<div class="slide" aria-hidden="true">
Sales Targets
</div>
<div class="slide">
Quarterly Sales
</div>
<div class="slide" aria-hidden="true">
Action Items
</div>
</div>
Par exemple, vous pouvez utiliser aria-hidden
si vous créez une UI modale qui bloque l'accès à la page principale. Dans ce cas, un utilisateur voyant peut voir une sorte de superposition semi-transparente indiquant que la majeure partie de la page ne peut pas être utilisée actuellement, mais un utilisateur de lecteur d'écran peut toujours être en mesure d'explorer les autres parties de la page. Dans ce cas, en plus de créer le piège clavier expliqué plus tôt, vous devez vous assurer que les parties de la page qui ne sont pas du champ d'application sont également aria-hidden
.
Maintenant que vous comprenez les bases des flux ARIA, leur fonctionnement avec la sémantique HTML native, et comment l'utiliser pour effectuer une opération chirurgicale assez importante sur l'arborescence d'accessibilité et modifier la sémantique d'un seul élément, voyons comment l'utiliser pour transmettre des informations urgentes.
aria-live
aria-live
permet aux développeurs de marquer une partie de la page comme "en ligne" dans le sens où les mises à jour doivent être communiquées immédiatement aux utilisateurs, quelle que soit la position de la page, plutôt que s'ils ont l'occasion d'explorer cette partie. Lorsqu'un élément possède un attribut aria-live
, la partie de la page qui le contient et ses descendants est appelée région active.
Par exemple, une région active peut être un message d'état apparaissant à la suite d'une action de l'utilisateur. Si le message est suffisamment important pour attirer l'attention d'un utilisateur voyant, il est suffisamment important pour attirer l'attention de l'utilisateur d'une technologie d'assistance en définissant son attribut aria-live
. Comparer ce texte brut div
<div class="status">Your message has been sent.</div>
et son équivalent "en direct".
<div class="status" aria-live="polite">Your message has been sent.</div>
Le champ aria-live
peut être associé à trois valeurs: polite
, assertive
et off
.
aria-live="polite"
indique à la technologie d'assistance d'alerter l'utilisateur de ce changement lorsqu'il a terminé ce qu'il est en train de faire. Elle est idéale si un élément est important, mais pas urgent, et représente la majorité de l'utilisation dearia-live
.aria-live="assertive"
indique à la technologie d'assistance d'interrompre tout ce qu'elle fait et d'alerter immédiatement l'utilisateur de ce changement. Cela ne s'applique qu'aux mises à jour importantes et urgentes, telles que des messages d'état tels que "Une erreur du serveur s'est produite et vos modifications n'ont pas été enregistrées. Veuillez actualiser la page" ou les mises à jour d'un champ de saisie à la suite d'une action de l'utilisateur (boutons sur un widget stepper, par exemple).aria-live="off"
indique à la technologie d'assistance de suspendre temporairement les interruptionsaria-live
.
Voici quelques astuces pour vous assurer que vos régions actives fonctionnent correctement.
Tout d'abord, votre région aria-live
doit probablement être définie lors du chargement initial de la page.
Il ne s'agit pas d'une règle absolue, mais si vous rencontrez des difficultés avec une région aria-live
, cela peut être à l'origine du problème.
Ensuite, les différents lecteurs d'écran réagissent différemment aux différents types de modifications. Par exemple, il est possible de déclencher une alerte sur certains lecteurs d'écran en basculant le style hidden
d'un élément descendant de "true" vers "false".
D'autres attributs qui fonctionnent avec aria-live
vous aident à affiner ce qui est communiqué à l'utilisateur lorsque la région active change.
aria-atomic
indique si la région entière doit être considérée comme un entier lors de la communication de mises à jour. Par exemple, si un widget de date composé d'un jour, d'un mois et d'une année comporte aria-live=true
et aria-atomic=true
, et que l'utilisateur utilise une commande pas à pas pour modifier uniquement la valeur du mois, le contenu complet du widget de date sera à nouveau lu à voix haute. La valeur de aria-atomic
peut être true
ou false
(valeur par défaut).
aria-relevant
indique les types de modifications à présenter à l'utilisateur.
Certaines options peuvent être utilisées séparément ou sous forme de liste de jetons.
- ajouts, ce qui signifie que tout élément ajouté à la région active est important. Par exemple, l'ajout d'un segment à un journal existant de messages d'état signifie que le délai sera annoncé à l'utilisateur (en supposant que
aria-atomic
était défini surfalse
). - text, ce qui signifie que le contenu textuel ajouté à tout nœud descendant est pertinent. Par exemple, la modification de la propriété
textContent
d'un champ de texte personnalisé lit le texte modifié à l'utilisateur. - suppressions, ce qui signifie que la suppression de tout nœud de texte ou descendant doit être communiquée à l'utilisateur.
- all (tous), ce qui signifie que toutes les modifications sont pertinentes. Cependant, la valeur par défaut de
aria-relevant
estadditions text
, ce qui signifie que si vous ne spécifiez pasaria-relevant
, l'utilisateur sera mis à jour pour tout ajout à l'élément, ce que vous souhaitez probablement obtenir.
Enfin, aria-busy
vous permet d'informer la technologie d'assistance qu'elle doit temporairement ignorer les modifications apportées à un élément, par exemple lors du chargement des éléments. Une fois que tout est en place, aria-busy
doit être défini sur "false" pour normaliser les opérations du lecteur.