Afficher le mot de passe: les leçons d'une expérience échouée dans l'accessibilité JavaScript

Cet article explore les défis de la création d'une fonction JavaScript accessible qui permet aux utilisateurs du lecteur d'écran d'entendre leur mot de passe pendant qu'ils tapent, tout en maintenant l'obfuscation visuelle. L'auteur détaille deux tentatives de prototypes et leurs lacunes.

Résultats de clés:

• Copie directement de la valeur du champ de mot de passe à un élément aria-live="assertive" a échoué car les lecteurs d'écran ont annoncé l'intégralité du mot de passe à la fois, et non par lettre par lettre, capitalisation mal interprétée et caractères spéciaux.
• Annoncez des lettres individuelles sur les événements de la baisse des touches a amélioré la rétroaction mais une vitesse de typage sévèrement limitée.
• Un problème critique avec les régions aria-live a été révélé: la plupart des combinaisons de lecteur de navigateur / écran ne traitent pas "affirmer" différemment de "poli", retarder les annonces jusqu'à ce que le lecteur d'écran soit inactif.
• L'expérience a souligné que la véritable accessibilité nécessite des solutions utilisables et intuitives, pas seulement la conformité technique.

Crédit photo: Daveynin

L'objectif initial de l'auteur était d'améliorer la sécurité pour les utilisateurs aveugles des champs de mot de passe, qui manquent de confirmation visuelle des entrées correctes. Les fonctionnalités standard "Afficher le mot de passe" présentent un risque de confidentialité dans des environnements partagés. Les prototypes visaient à fournir des commentaires auditifs sans révéler visuellement le mot de passe.

Le premier prototype a utilisé une région aria-live pour annoncer la valeur du mot de passe. Cependant, cela a entraîné l'annonce de l'ensemble du mot de passe comme une seule unité, conduisant à des interprétations erronées de la capitalisation et des caractères spéciaux. Le deuxième prototype a tenté de résoudre ce problème en annonçant chaque lettre individuellement, mais cela a gravement entravé la vitesse de typage.

Un obstacle important était la mise en œuvre incohérente de aria-live="assertive" entre différents navigateurs et lecteurs d'écran. Dans la plupart des cas, il s'est comporté comme «poli», retardant les annonces et rendant la solution peu pratique.

La conclusion souligne qu'une solution vraiment accessible doit être à la fois techniquement conforme et conviviale. L'auteur suggère que si une fonction standard "Afficher le mot de passe" peut être accessible, elle présente des risques de sécurité. L'article explore également d'autres approches, notamment en utilisant aria-label pour fournir des instructions spécifiques au lecteur d'écran.

Les questions fréquemment posées (FAQ) et les solutions:

L'article se termine par une section FAQ complète abordant les questions courantes sur la création et la mise en œuvre de fonctionnalités de bascule de mot de passe accessibles à l'aide de JavaScript, JQuery et CSS, y compris des considérations pour le style, la sécurité et les tests. Ces solutions offrent des conseils pratiques aux développeurs qui cherchent à créer des expériences de saisie de mot de passe plus inclusives et sécurisées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!