Comment rendre une entrée / curseur de plage accessible aux lecteurs d'écran pour UX aveugle
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Comment rendre le lecteur d'écran d'entrées/curseurs accessible?
Quelle est la meilleure solution pour rendre ces types d'entrées accessibles aux utilisateurs aveugles?
N'oubliez pas qu'il pourrait également y avoir des problèmes supplémentaires si le curseur est utilisé pour sélectionner une plage de valeurs.
Ce ne sont pas seulement les utilisateurs visuellement améliorés que vous devriez considérer ici. Pensez aux utilisateurs qui n'utilisent que le clavier ou qui se sont cassé le poignet, ou à toutes sortes d'utilisateurs. Accessibilité ≠ uniquement les utilisateurs aveugles.
Mais de toute façon, pour répondre à votre question - vous avez un champ de texte dans votre premier exemple. Telle est l'approche à adopter. Le curseur doit être une amélioration du formulaire, il ne doit pas être la seule méthode d'entrée.
Fournissez des champs dont la valeur est liée au curseur (faire glisser le curseur modifie la valeur dans le champ) et vice-versa (taper dans le champ déplace également le curseur). Donnez à ces champs des étiquettes appropriées; si ce n'est pas visuellement défini dans le balisage lui-même, afin que les utilisateurs sachent à quoi ils servent (c'est-à-dire "valeur maximale" + "valeur minimale") et fournissent un texte à l'écran et des commentaires expliquant les règles des champs, et tout devrait bien se passer .
Cela couvrira le problème du lecteur d'écran (le marquage de votre code HTML en utilisant des normes correctes est presque toujours tout ce qui est nécessaire pour être compatible avec le lecteur d'écran) et le rendra utilisable pour les personnes n'utilisant pas également une souris.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Vérifiez OpenAjax. Ici vous pouvez trouver un exemple de la façon dont un widget curseur accessible: http://www.oaa-accessibility.org/example/32/
Fondamentalement, vous pouvez dire que votre composant curseur est accessible si tous l'utilisateur peut terminer la tâche de sélection des valeurs dans une plage. Pour résumer, ce que vous devez ajouter à vos composants est:
- Étiquettes et descriptions: Les utilisateurs aveugles naviguent avec les lecteurs d'écran, vous devez donc vous assurer que votre curseur possède des étiquettes de formulaire ou des étiquettes ARIA qui indiquent au lecteur d'écran ce que est en cours et quelles valeurs sont sélectionnées
- Navigation au clavier Les utilisateurs souffrant de troubles moteurs peuvent utiliser des claviers spéciaux ou d'autres périphériques que les souris, vous devez donc également ajouter des gestionnaires d'événements de clavier au sélecteur de plage.
Contraste des couleurs suffisant : les utilisateurs malvoyants ou dans des conditions d'éclairage extrêmes peuvent ne pas être en mesure de le voir (utilisez un vérificateur de contraste et ajustez les couleurs par la suite)
J'espère que cela aide!