Des navigateurs obsolètes ? Des technologies d'assistance obsolètes ? JavaScript à la rescousse ! Dans ce dernier volet de notre série consacrée à la validation accessible des formulaires et à l'amélioration de l'ergonomie, nous allons intégrer le plugin jQuery Validation afin de garantir que notre formulaire soit accessible à tous sur tous les appareils prenant en charge JavaScript, y compris le redoutable IE6.
Formulaire de démonstration avec validation HTML5, WAI-ARIA et jQuery (paramètres par défaut)
Formulaire de démonstration avec validation HTML5, WAI-ARIA et jQuery (paramètres modifiés)
Le HTML5 et ARIA ont leurs limites, mais pas JavaScript !
Certes, JavaScript présente certaines limites, mais en réalité, il n’y en a aucune si vous le codez en tenant compte de l’accessibilité. Il fonctionne sur pratiquement tous les navigateurs et appareils mobiles. Personne ne désactive vraiment JavaScript, à moins d’être un passionné de sécurité. Si vous souhaitez gérer une situation où JavaScript est désactivé et protéger votre base de données contre les attaques par injection SQL, vous devez également valider les données saisies dans les formulaires côté serveur. La validation côté serveur peut être considérée comme le niveau le plus bas de la validation accessible des formulaires et fonctionnera dans n’importe quel navigateur, y compris sur les téléphones basiques.
Ajout du plugin de validation jQuery
jQuery est le framework JavaScript dominant sur le Web et peut être considéré comme le grand gagnant de la « guerre des frameworks JS » de ces dernières années. La devise de jQuery est « Écrire moins, faire plus ». Minimalisme et accessibilité font très bon ménage !
It’s very simple to add jQuery Validation to any HTML form. Link to jQuery, we’re using a content delivery network here so we don’t have to download the JavaScript file. Then link to the validation plugin. Then tell jQuery to run the validation plugin on your form with the id attribute you want to validate. This will happen after the document is finished loading. Add this code to the <head>.
Le plugin détecte nos champs de saisie grâce à l'attribut « required » de HTML5 et, par défaut, effectue sa propre validation via JavaScript au lieu d'utiliser HTML5. Cela pose problème. Nous souhaitons que la validation HTML5 soit effectuée dans les navigateurs qui la prennent en charge, et que seule la validation via JavaScript soit utilisée dans ceux qui ne la prennent pas en charge.
Paramètres par défaut de la validation jQuery
There are some issues with the default settings. It stops the native HTML5 validation. The other big accessibility issue is that by default the error messages are placed in a second <label>. So there are two labels pointing to one input. This is a problem for some screen readers. VoiceOver will not announce the second label when the user tabs through the form. Steve Faulkner (@stevefaulkner) wrote a recent blog post titled, Notes on applying multiple labels for a control using the label element, and created a test case, multiple labels for a control using the label element, where you can see where multiple labels fail in certain AT. aria-labelled by is a better solution than using multiple labels.
Nous avons donc deux problèmes pour l'instant avec les paramètres par défaut. La validation HTML5 est désactivée et deux étiquettes renvoient vers un seul champ de saisie. Le troisième problème est que le message d'erreur s'affiche sous le champ de saisie. Nous devons donc le déplacer vers l'étiquette d'origine et utiliser du CSS pour le positionner où nous le souhaitons.
Personnalisation de la validation jQuery
Options de la méthode validate()
Il existe de nombreuses options permettant de modifier les paramètres par défaut du plugin de validation. Nous souhaitons modifier les paramètres `errorPlacement` et `errorElement`. Nous souhaitons également supprimer l'attribut `novalidate` qui est appliqué par défaut à notre formulaire.
Change the code in the <head> to this:
To change the errorPlacement I found some code on Stack Overflow to select the associated label element of an input field and append the error message to that. Then I changed the errorElement to be an <em> rather than another <label>. And then used jQuery to select the form on the page and remove the novalidate attribute.
Voilà exactement le comportement souhaité. Les navigateurs modernes comme Chrome et Firefox effectueront d'abord une validation HTML5, tandis que les autres navigateurs offrant une prise en charge moins étendue du HTML5, comme Safari sur Mac et iOS, utiliseront jQuery Validation.
Ça fonctionne même sous IE6 ! Cliquez sur les deux liens de démonstration dans différents navigateurs pour constater les différences.
Formulaire de démonstration avec validation HTML5, WAI-ARIA et jQuery (paramètres par défaut)
Formulaire de démonstration avec validation HTML5, WAI-ARIA et jQuery (paramètres modifiés)
Les formulaires peuvent être fastidieux et difficiles d'accès !
Changons la donne en matière de saisie de données sur le Web !
Ces trois articles s'inspirent d'une conférence que j'ai donnée lors du salon CSUN 2012. J'espère que cette série vous a plu !
Liens vers les trois articles de cette série :
- Validation accessible des formulaires côté client avec HTML5
- Validation accessible des formulaires côté client avec HTML5 et WAI-ARIA
- Validation accessible des formulaires côté client avec HTML5, WAI-ARIA et le plugin jQuery Validation
Des commentaires ? Des questions ?
Alors, que pensez-vous de ces trois niveaux d'accessibilité que nous avons ajoutés à notre formulaire ? Lors de ma présentation à AccessU 2012, quelqu'un m'a fait remarquer que cela semblait représenter beaucoup de travail supplémentaire pour rendre un formulaire accessible. Je pense que cela en vaut vraiment la peine pour créer un formulaire très convivial et universellement accessible sur tous les appareils prenant en charge l'accessibilité.
N'hésite pas à me faire part de tes suggestions d'amélioration ou à me signaler les éventuelles erreurs que tu pourrais repérer.
