Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel du HTML5

Gérer les formulaires

Testez gratuitement nos 1338 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Abordez les aspects interactifs du contenu tels que les formulaires, en complément des informations de base. Il ne faut pas oublier de compléter la mise à niveau par JavaScript. Cela reflète les changements d'état et de propriétés.
04:42

Transcription

Pareillement, lorsque l'on va avoir un formulaire, qui va venir requérir de l'information et être entré par l'utilisateur, il est important de venir doubler, bien que certaines fois les balises soient pris en compte, encore une fois, par HTML5 ou même antérieur, mais de les doubler par des balises détail de propriété, au niveau de ARIA, ici, pour s'assurer d'avoir une meilleure lisibilité, portabilité sur les lecteurs d'écran. Alors ici, rapidement, qu'est-ce qu'on a ? On a un premier input qui est masqué. Puis ensuite, on a une liste d'élement, qui vont chacun avoir le nom, l'email, l'objet, le terme, donc accepter les termes du contrat, une case à cocher, et puis le message à envoyer. Alors bien sûr, on aurait le bouton, etc, mais une fois qu'on a compris le principe de fonctionnement, vous allez voir tout ce qu'il faut prendre en compte lorsqu'on fait des formulaires en HTML, pour les rendre accessibles. Alors ici première chose, on va placer ici la touche tabindex, qui va nous permettre de naviguer de formulaire en formulaire. Alors, le premier formulaire à remplir c'est celui-ci, donc on va taper un tabindex 1. Le bon sens voudrait qu'on numérote par ordre tout, 1, 2, 3, 4, 5. Alors on pourrait prendre un pas plus grand, 1, 10, 20, 30, histoire que si le formulaire change, on puisse venir placer des éléments entre. Le bon sens voudrait qu'on commence par 1, et qu'on continu à acrémenter dans le sens. Mais on a un autre bon sens qui est l'ordre. c'est-à-dire que si l'ordre HTML est bon, il n'y a pas besoin de dire, attention, on doit changer l'ordre. Non, on peut suivre l'ordre. Donc il suffit maintenant que je mette un tabindex 0, au suivant, et on gardera l'ordre dans le sens qu'il a été indiqué par le HTML. Par contre, on peut se dire que l'objet, peut-être, on peut vouloir le sauter. Donc si on veut le sauter, on va mettre un tabindex négatif, et il ne sera pas pris en compte par la tabulation. Ensuite on va continuer les termes, 0, 0. Si j'enregistre et que je teste, dans un navigateur, mon formulaire, Voilà, j'actualise. On voit bien, ici, si je prends une tabulation, on prend bien le premier, on prend l'email, on saute l'objet, on passe directement aux termes, et on passe au message rien qu'avec tabulation. Donc jusque là, c'est correct. Qu'est-ce qu'on a ensuite à prendre en compte ? On a à prendre en compte le fait qu'ici on a un label, qui est indiqué par l'ID label du nom, fornom, parfait. Mais on a aucune informations entre le input et le label, donc on pourrait venir dire, un ARIA ableledby, et on indique, à chaque fois, l'élément dans lequel on va être en relation, pour identifier la nature du champ. Ensuite, on a une case à cocher, et cette case à cocher, par défaut, n'est pas cochée. Donc, on n'a pas l'attribut checked qui a été explicitement indiqué, donc il va falloir venir ici, rajouter un ARIA checked false, pour dire, attention il n'est pas checké. Mais que va-t-il se passer quand je vais cliquer ? Je vais forcément le checker donc il faudra que je vienne agir sur cette propriété, pour modifier avec du javascript. Alors pour cela, on va faire onload init. On va dire que on va créer le terme, le terme, et récupérer le sélectionneur en question, c'est l'ID term, vous voyez, ici. C'est l'ID term, on le récupère. On va pouvoir dire, je vais mettre un écouteur sur le clic, et je vais mettre un écouteur sur le clavier. Je vais invoquer la fonction check ARIA. Et en fonction de ça, je mettrais un ARIA checked qui sera égal à this checked, donc, ou il sera coché, ou il ne sera pas coché. Donc on va pouvoir enregistrer tout ça, basculer dans le navigateur. Cette fois-ci je vais ouvrir l'inspecteur, F12. Je reste sur les éléments, c'est très bien. Je vais passer dans l'élément de liste ici, qui correspond au checkbox. J'actualise ma page pour être bien sûr. Ici, et regardez bien le checked, il est false. Si je clique ici, il passe à true, si je reclique, il repasse à false. Et si maintenant je clique avec le clavier, je le coche ou je le décoche, vous voyez, et donc le ARIA checked est bien pris en compte. Donc pensez à prendre en compte toutes ces informations là, par du javascript, et imaginez les complexités que ça peut avoir si les formulaires sont complexes. Ici j'ai un champ qui est requis, donc théoriquement, l'attribut HTML5 required, est bien compris par les lecteurs d'écran, mais il est toujours bien de le doubler pour les anciens, donc ARIA required true, celui-là false, il n'est pas requis. Celui-là true, il est requis. Il est requis. Toujours penser à venir donner ce genre d'informations là. Et enfin, le dernier élément, c'est cet élément, ici, qui est caché, de pouvoir le donner comme étant ARIA hidden true, on ne le lira pas, il ne sera pas lu. du fait que c'est simplement la clé du formulaire qui être passée, par exemple, sur ce genre d'informations là. Vous pouvez toujours revenir charger votre fomulaire, et prendre un coup de WAVE, pour regarder que vous n'ayez pas d'erreurs, que vous n'ayez pas de soucis importants, à prend en compte au niveau de l'accessibilité.

L'essentiel du HTML5

Préparez la structure de vos sites web de manière évolutive, sémantique, et accessible à tous avec le HTML5. Abordez la gestion du texte, les balises et les attributs, etc.

5h13 (63 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Spécial abonnés
Date de parution :29 juin 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !