web-dev-qa-db-fra.com

Tootti accessible avec des liens

Je travaille sur un composant d'entrée accessible avec une info-bulle intégrée. J'ai réussi à créer une solution qui semble fonctionner correctement pour les personnes présentant des limitations - chaque fois que l'utilisateur se concentre sur l'entrée avec le clavier, pas la souris, s'il ne commence pas à taper une demi-minute, le lecteur d'écran le lit.

Cependant, il y a eu quelques cas avec des liens à l'intérieur de l'info-bulle, ce qui signifie que l'utilisateur doit pouvoir naviguer dans un nuage d'info-bulle et des liens de focalisation.

Quel pourrait être le modèle à utiliser ici qui serait intuitif pour l'utilisateur? Utilisation de l'onglet Pour naviguer à l'intérieur, le nuage peut ne pas être idéal car on pourrait s'attendre à ce qu'il se déplace vers le contrôle suivant sur le formulaire. Utiliser des flèches pour naviguer sur des éléments sensibles dans le nuage ne semble pas si intuitive et qu'elle entre dans la voie automatique.

J'espérais peut-être que quelqu'un ici a de l'expérience mettant en œuvre un tel cas et pourrait partager ses idées. Je sais qu'un moyen serait de garder des astuces à dégager des liens et de montrer de telles informations explicitement sur la page, mais c'est en dehors de mon contrôle.

2
waterplea

Il y a deux modifications à apporter si vous travaillez sur une solution d'info-bulle accessible.

Évitez la présentation automatique d'une info-bulle lorsque l'utilisateur concentre une commande d'interface utilisateur avec le clavier. Il y a des avertissements à ce sujet dans WCAG . Il doit y avoir une action claire qui invoquerait une info-bulle. De plus, il doit y avoir une action distincte qui la ferme, telle que le bouton de fermeture à l'intérieur. La navigation sur le bouton de fermeture avec l'onglet est une solution parfaitement fine puisque vous avez modifié le contenu et la mise en page des commandes sur votre écran lors de l'apparition de cette info-bulle.

Évitez d'utiliser des hyperliens ou d'autres éléments d'action en dehors du bouton de fermeture à l'intérieur de l'info-bulle. Une info-bulle devrait fournir une brève explication à un contrôle de l'UI de la paix du contenu en texte brut. Si vous avez besoin de liens ou de boutons à l'intérieur, cela n'est plus une info-bulle. Repenser la manière dont les informations sont définies et utilisent des mécanismes plus appropriés tels que des dialogues, des panneaux d'expansion et tels.

1
Davyd Geyl

Avoir des liens à l'intérieur des info-bulles est une mauvaise nouvelle et peut causer beaucoup de problèmes, en fonction des appareils/outils d'assistance utilisés.

Nous avons décidé d'utiliser un "Popover" pour cela, pas une info-bulle, ce qui signifie qu'il sera basculé sur/éteint par entrée, pas seulement en se concentrant ou en vitrant. Cela facilite beaucoup plus facilement l'utilisateur de se déplacer dans la ponphère ouverte et d'interagir avec elle. Je reconnais que cela pourrait ne pas fonctionner bien demander aux utilisateurs d'appuyer sur Entrée dans les champs de formulaire à basculer pour basculer des pondérades. Je pense donc que vous le trouverez difficile sans modifier la conception de l'application. Ajout d'une icône d'aide Une fois que l'entrée pourrait être une idée ou simplement ajouter le texte d'aide visiblement sous l'entrée.

0

Affichage de la boîte à outils Lorsqu'un élément actionnable est concentré est bien. Il n'y a pas d'avertissement sinon à ce sujet critère de réussite 1.4.1 . Ce que vous ne voulez pas faire, c'est avoir des éléments d'action dans l'info-bulle depuis les info-bulles ne peuvent pas recevoir la mise au point .

Lorsqu'un utilisateur de clavier se concentre sur un autre élément, l'info-bulle peut être fermé ou une touche (généralement CES) peut fermer l'info-bulle.

Pour les utilisateurs de la souris, ils devraient pouvoir déplacer le pointeur entre la gâchette de l'info-bulle et l'info-bulle sans la totalité de l'info-bulle.

Si vous avez besoin d'un lien ou d'un autre élément d'action dans l'info-bulle, envisagez d'utiliser une boîte de dialogue ou un contenu basculant.

0
Honking Squirrel