Masquer le contenu des technologies d'assistance
aria-masqué
Une autre technique importante pour affiner l'expérience en matière d'assistance pour les utilisateurs de technologies, il faut s'assurer que seules les parties pertinentes de la page sont exposés à des technologies d'assistance. Il existe plusieurs façons de s'assurer qu'une section du DOM n'est pas exposé aux API d'accessibilité.
Tout d'abord, tout ce qui est explicitement masqué dans le DOM ne sera pas non plus inclus
dans l'arborescence d'accessibilité. Ainsi, tous les éléments dont le style CSS est visibility:
hidden
ou display: none
, ou qui utilisent l'attribut HTML5 hidden
seront également
cachés aux utilisateurs
de technologies d'assistance.
Toutefois, un élément qui n'est pas affiché visuellement, mais qui n'est pas explicitement masqué, toujours inclus dans l'arborescence d'accessibilité. Une technique courante consiste à inclure "texte du lecteur d'écran uniquement" dans un élément qui est positionné de manière absolue en dehors 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 uniquement du texte avec un lecteur d'écran via un
Attribut aria-label
, aria-labelledby
ou aria-describedby
faisant référence à
autrement caché.
Consultez cet article WebAIM sur les techniques de masquage texte pour en savoir plus sur la création d'un lecteur d'écran uniquement du texte.
Enfin, ARIA fournit un mécanisme pour exclure du contenu des
une technologie qui n'est pas dissimulée visuellement, via l'attribut aria-hidden
.
Si vous appliquez cet attribut à un élément, celui-ci et tous ses éléments
descendants de l'arborescence d'accessibilité. Les seules exceptions concernent les éléments
désigné 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
de superposition semi-transparente indiquant que la majeure partie de la page ne peut actuellement pas
utilisé, 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 au clavier, expliqué
plus tôt,
vous devez vous assurer que les parties de la page qui sont actuellement hors du champ d'application
sont également aria-hidden
.
Maintenant que vous connaissez les principes de base d'ARIA, comment l'utiliser avec le code HTML natif et comment l'utiliser pour réaliser des opérations chirurgicales majeures sur le l'arborescence d'accessibilité et 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 page
plutôt que s'il vient juste d'explorer cette partie de la page. Quand ?
Un élément possède un attribut aria-live
, la partie de la page qui le contient et
et ses descendants est appelé zone active.
![ARIA Live établit une région active.](https://web.dev/static/articles/hiding-and-updating-content/image/aria-live-establishes-li-acc61d8956fc7.jpg?authuser=6&hl=fr)
Par exemple, une région active peut être un message d'état qui apparaît suite à
une action de l'utilisateur. Si le message est suffisamment important pour attirer l'attention de l'utilisateur voyant
attention, il est suffisamment important de diriger
l'expérience de l'utilisateur
pour attirer son attention sur cette instance en définissant son attribut aria-live
. Comparer à ce simple div
<div class="status">Your message has been sent.</div>
avec son "direct" votre homologue.
<div class="status" aria-live="polite">Your message has been sent.</div>
aria-live
comporte trois valeurs autorisées: polite
, assertive
et off
.
aria-live="polite"
indique à la technologie d'assistance d'alerter l'utilisateur à ce sujet. changer lorsqu'il a fini ce qu'il est en train de faire. C'est génial d'utiliser si quelque chose est important mais pas urgent, Utilisation dearia-live
.aria-live="assertive"
indique à la technologie d'assistance d'interrompre tout ce qu'elle est en cours faire et alerter immédiatement l’utilisateur de ce changement. Ceci n'est valable que pour des informations importantes et urgentes, comme un message d'état tel que "Une erreur de serveur et vos modifications ne sont pas enregistrées ; veuillez actualiser la page", ou des mises à jour d'un champ de saisie directement à la suite d'une action de l'utilisateur, par exemple sur un widget pas à pas.aria-live="off"
indique à la technologie d'assistance de suspendre temporairementaria-live
interruptions.
Voici quelques astuces pour vous assurer que les 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.
Ce n'est pas une règle absolue, mais si vous rencontrez des difficultés avec une
aria-live
région, c'est peut-être le problème.
Deuxièmement, les différents lecteurs
d'écran réagissent différemment à différents types de
des modifications. Par exemple, il est possible de déclencher
une alerte sur certains lecteurs d'écran
en faisant passer le style hidden
d'un élément descendant de "true" à "false".
D'autres attributs qui fonctionnent avec aria-live
vous aident à affiner
à l'utilisateur lorsque la région active change.
aria-atomic
indique si la région entière doit être considérée comme
lors de la communication
des mises à jour. Par exemple, si un widget de date
jour, mois et année contient aria-live=true
et aria-atomic=true
, et l'utilisateur
utilise un pas à pas pour modifier la valeur du mois, l'intégralité du contenu
du widget de date
est lu à nouveau. 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 comme liste de jetons.
- additions, ce qui signifie que tout élément ajouté à la région active est
importantes. Par exemple, ajouter un segment à un journal d'état existant
messages signifient que le segment est annoncé à l'utilisateur (en supposant que
que
aria-atomic
étaitfalse
). - text, ce qui signifie que le contenu textuel ajouté à tout nœud descendant est
pertinentes. Par exemple, modifier la propriété
textContent
d'un champ de texte personnalisé lira le texte modifié à l'utilisateur. - removals, ce qui signifie que la suppression de tout nœud de texte ou de tout nœud descendant être transmis à l'utilisateur.
- all, ce qui signifie que toutes les modifications sont pertinentes. Toutefois, la valeur par défaut
aria-relevant
estadditions text
, ce qui signifie que si vous ne spécifiez pasaria-relevant
met à jour l'utilisateur pour tout ajout à l'élément. c'est ce que vous êtes le plus susceptible de vouloir.
Enfin, aria-busy
vous permet d'indiquer à la technologie d'assistance qu'elle doit
ignorer temporairement les modifications apportées à un élément, par exemple lors du chargement d'éléments. Une fois
que tout est en place, aria-busy
doit être défini sur "false" pour normaliser le
le fonctionnement du lecteur.