Masquer et mettre à jour du contenu

Masquer le contenu des technologies d'assistance

Alice Boxhall

Dave Gash

Meggin Kearney

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 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 du 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 assez importantes 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.

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