web-dev-qa-db-fra.com

Curseurs et accessibilité: facilité d'utilisation des curseurs pour les utilisateurs handicapés

Je me demandais si l'utilisation de curseurs rendrait plus difficile pour les personnes handicapées de sélectionner des valeurs. Est-il difficile de glisser-déposer pour eux? Est-il facile pour eux de voir les valeurs changer tout en déplaçant un élément différent, ou de sélectionner une valeur spécifique?

12
EdGG

Les curseurs sont une amélioration - pas un remplacement pour la saisie de données. Toute personne ayant des problèmes de motricité peut avoir des problèmes avec les curseurs, vous devez donc vous assurer que les valeurs d'entrée peuvent également être saisies manuellement via le clavier. Cela nécessite que vous rendiez le champ de valeur visible et ciblable.

Le balisage doit produire un champ de saisie par défaut:

Value: 
[50%     ]

Ensuite, via JS, vous 'amélioreriez' cela en ajoutant le curseur, qui, à son tour, mettrait à jour le champ de texte (et inversement, si vous mettez à jour manuellement le champ de texte, il devrait mettre à jour le curseur).

Value: 
>========||========< [50%     ]

Notez que HTML5 inclut désormais le type d'entrée range qui sera rendu sous forme de curseur. Cependant, je ne suis pas entièrement sûr de l'accessibilité de cette entrée particulière pour le moment. J'ai essayé de tirer une référence pour cela, mais je ne trouve aucune référence à l'entrée range qui traite spécifiquement de l'accessibilité (si quelqu'un a un lien, partagez-le!)

13
DA01

Il n'y a pas de mauvais ou de bons composants, cela dépend de la mise en œuvre. En général, le curseur n'est pas un composant d'interface utilisateur très accessible, mais vous pouvez l'améliorer.

Quand je pense à l'accessibilité du curseur, je pars de la spécification WAI-ARIA , qui spécifie comment augmenter l'accessibilité des composants d'interface utilisateur développés avec Ajax, HTML, JavaScript et les technologies connexes. WAI-ARIA 1.0 Authoring Practices dit:

Un curseur est une entrée utilisateur où l'utilisateur sélectionne une valeur dans une plage donnée. Les curseurs ont généralement un bouton tel que lorsqu'ils sont déplacés, la valeur actuelle sera modifiée dans la plage actuelle du curseur. Le bouton doit être accessible au clavier (focalisable et utilisable). Il est généralement possible d'ajouter ou de soustraire à la valeur actuelle en utilisant les touches directionnelles telles que les touches fléchées.

  •  (Flèche droite) et  (Flèche vers le haut) augmentez la valeur du curseur.
  •  (Flèche gauche) et  (Flèche vers le bas) diminue la valeur du curseur.
  • Home et End passer aux valeurs minimale et maximale du curseur.
  • Tab dans et hors du curseur.
  • Page Up et Page Down éventuellement incrémenter ou décrémenter le curseur d'une quantité donnée.

Donc, ma recommandation - si vous pensez que vous avez besoin d'un curseur, utilisez-le, mais rendez-le accessible. Et, bien sûr, test test test.

4
Igor Gubaidulin