Masquer et mettre à jour du contenu

Masquer du contenu aux technologies d'assistance

Alice Boxhall

Dave Gash

Meggin Kearney

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 de aria-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 interruptions aria-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 sur false).
• 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 est additions text, ce qui signifie que si vous ne spécifiez pas aria-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.