Consignes d'accessibilité pour enregistrer les modifications apportées aux contrôles booléens dans une application Web
Nous avons actuellement certaines pages de paramètres dans une application Web où il y a une liste de contrôles avec des cases à cocher, vous pouvez donc activer/désactiver certaines fonctionnalités. Nous avons également une option d'enregistrement en dessous de celles-ci qui est désactivée jusqu'à ce qu'une modification soit apportée aux cases à cocher précédentes.
Nous essayons de conformer ce formulaire pour être plus accessible et l'approche actuelle consiste simplement à ne pas désactiver l'option d'enregistrement, mais à lancer une erreur si aucune modification n'a été apportée et un message de réussite sur une modification réussie.
Cela ne semble pas rendre le formulaire plus utilisable mais aide uniquement à contourner la règle d'accessibilité selon laquelle un bouton de soumission ne doit pas être désactivé. Cependant, du point de vue de l'interaction, la possibilité de l'apparence désactivée d'un bouton permet à un utilisateur de savoir que son travail n'est pas terminé.
Il y a 3 solutions possibles que j'ai trouvées pour ce scénario:
- Conservez une vue [~ # ~] lue [~ # ~] de ces contrôles où aucune action ne peut être effectuée à moins de cliquer sur ÉDITEZ pour changer les commandes. en mode [~ # ~] éditez [~ # ~] , les options de la case à cocher sont disponibles ainsi que ENREGISTRER & ANNULER et ** SAVE * seraient désactivés jusqu'à ce qu'une modification soit effectuée (je ne sais pas si cela passe l'accessibilité, mais à rend l'idée que vous "éditez ces champs et devez l'enregistrer" plus délibérément).
- Stylisez le bouton comme un bouton désactivé mais utilisez HTML pour le traiter comme un bouton normal. Si vous cliquez sur le bouton, nous pouvons afficher un avertissement indiquant "Vous n'avez apporté aucune modification. Veuillez modifier certains contrôles afin de sauvegarder".
- Modifiez les cases à cocher pour être un composant de style commutateur qui enregistre simplement automatiquement, ce qui supprime le bouton "Enregistrer" de l'équation.
Si des personnes enclines à l'accessibilité ont des idées sur laquelle de ces options (ou une alternative à laquelle je n'ai pas pensé) améliorerait la convivialité de ce scénario tout en le rendant accessible, veuillez me le faire savoir.
mais aide uniquement à contourner la règle d'accessibilité selon laquelle un bouton d'envoi ne doit pas être désactivé
Il n'y a pas une telle "règle". Il n'y a rien sous-entendu dans WCAG qui dit qu'un bouton d'envoi ne peut pas être désactivé.
Personnellement, je pense que l'approche la plus simple est de laisser la fonction SAVE activée et de permettre à quelqu'un d'enregistrer même s'il n'a pas apporté de modifications. Pourquoi cela devrait-il générer une erreur? C'est une interface utilisateur très simple. Laissez l'utilisateur cliquer sur ENREGISTRER aussi souvent qu'il le souhaite.
Une autre possibilité consiste à enregistrer automatiquement, en fonction de la façon dont il est "coûteux" d'économiser. Vous pouvez enregistrer chaque fois qu'une case est cochée. C'est un modèle très populaire. Ensuite, vous n'auriez pas besoin d'un bouton ENREGISTRER, bien que vous ayez peut-être besoin d'un moyen d'annuler.
La question dit:
Nous essayons de rendre ce formulaire plus accessible et l'approche actuelle consiste simplement à ne pas désactiver l'option d'enregistrement, (...).
Cela ne semble pas rendre le formulaire plus utilisable, mais aide uniquement à contourner la règle d'accessibilité selon laquelle un bouton d'envoi ne doit pas être désactivé.
Cependant, WCAG 2.1 n'interdit pas les boutons désactivés ou les composants d'interface utilisateur. En fait, les critères de réussite 1.4.3 (Contraste minimum) , 1.4.6 (Contraste amélioré et 1.4.11 (Contraste non textuel) tous contiennent une exemption pour les "composants inactifs". Aucun critère de succès n'interdit de désactiver les composants de l'interface utilisateur.
Le premier scénario, utilisant une vue de lecture et une vue d'édition, est quelque chose que j'ai vu dans les systèmes de gestion de l'apprentissage, mais qui semble exagéré pour les formulaires normaux. Les utilisateurs s'attendront à ce que les cases à cocher fonctionnent comme des cases à cocher dans d'autres applications Web.
Le deuxième scénario, qui fait ressembler un bouton d'enregistrement/d'envoi normal à un bouton désactivé jusqu'à ce que quelque chose dans le formulaire ait été modifié, présente d'autres inconvénients:
- WCAG SC 1.3.1 requiert que, "Les informations, la structure et les relations véhiculées par la présentation puissent être déterminées par programme ou soient disponibles dans le texte." Donc, si cela ressemble à un bouton désactivé, il doit être déterminable par programme en tant que tel, par exemple en utilisant
aria-disabledétat . - WCAG SC 4.1.2 nécessite, entre autres, que l'état des composants de l'interface utilisateur soit déterminable par programme. Cela s'applique également aux boutons désactivés.
(Vous devriez également vous demander si vous voulez que le bouton désactivé soit axé sur le clavier .)
Le scénario 3 fonctionnerait également, mais implique probablement beaucoup plus de travail que l'utilisation d'un bouton désactivé qui est conforme aux critères répertoriés pour le deuxième scénario.