Les formulaires accessibles

Les formulaires accessibles

page en cours de rédaction

Rendre des formulaires Web accessibles n’est pas des plus compliqué. Les (quelques) contraintes techniques vous obligeront à penser intelligemment et logiquement votre formulaires.

Le cheminement doit être compréhensible. L’accessibilité consistera – entre autre – à qualifier sémantiquement et fonctionnellement les éléments du formulaire, pour que le visiteur sache ce qu’il peut/doit en faire. Là encore, l’accessibilité est le prolongement de bonnes pratiques qui doivent déjà être incluses à vos formulaires.

La norme HTML5 propose de nombreux marqueurs qui permettent de qualifier au mieux les éléments d’un formulaire, que ce soient les champs et les textes les accompagnant.

L’autre avantage, c’est que ces nouveautés vont permettre de ne pas recourir à chaque instant aux programme Javascript, qui peuvent avoir des comportements inappropriés dans un contexte d’accessibilité.

Les possibilité de HTML5

Autrefois, nous avions des types de champs très généraux (texte, fichier, choix multiples, choix unique…), mais rien pour préciser ce qu’on attend du visiteur. Evidemment, il était déjà possible d’associer un descriptif au champ (par le marqueur <label> ou l’attribut title="").

Aujourd’hui, le marqueur <input> dispose de nouveaux types qui précisent la donnée qui sera stockée dans la variable. Voici quelques exemples :

  • nombre entier (type="number"),
  • email (type="email"),
  • URL (type="url"),
  • date (type="date"),
  • mois (type="month"),
  • semaine (type="week"),
  • date/heure (type="datetime"),
  • heure (type="time"),
  • plage de valeurs (type="range"),
  • téléphone (type="tel"),
  • couleur (type="color"),

Dans certains cas, d’autres attributs complètent le type (notamment pour l’email, la plage de valeurs ou le nombre). La plupart des navigateurs récents prennent en charge tous ces nouveaux types, y ajoutent des éléments graphiques pratiquent (comme une palette de couleurs) et vérifient si la saisie du visiteur correspond au type demandé (il est quelques fois possible de préciser le modèle attendu par l’attribut pattern=""). En dehors de l’ergonomie améliorée, ces nouveaux vont explicitement renseigner l’outil d’assistance technique sur les valeurs attendues et autorisées.

Rappel : depuis HTML5, certains marqueurs ont une fonction sémantique explicite qui n’a plus besoin d’être complétée par des rôles ARIA.

Les textes explicatifs

Un autre marqueur HTML, qui lui n’est pas nouveau, c’est <label>. Il permet de lier un libellé à un champ. Par exemple, si dans votre formulaire de contact vous demandez les nom et prénom du visiteur, vous allez certainement indiquer chacun de ces termes juste avant le champ. Mais des formulaires peuvent avoir une mise en page plus complexe. Pour éviter toute ambiguïté, il faut lier le libellé avec son champ, par les marqueurs <label for="idChamp"> et <input id="idChamp">. Ainsi, l’identifiant du champ est précisé dans l’attribut « for » du label qui lui est associé. Le navigateur comprend le lien et l’assistance technique aussi. Le visiteur peut donc comprendre l’utilisé du champ. Ine autre soluion est d’inclure le marqueur du champ à l’intérieur de celui du libellé : <label>texte <input id="idChamp" type="text"></label>.

Pensez également à l’attribut required qui indique que le champ doit être obligatoirement renseigné.

Les attributs ARIA

Même si HTML5 a tout ce qu’il faut pour bien qualifier les éléments d’un formulaire, il peut être souhaitable d’apporter des précisions. Les attributs ARIA (extension du HTML) ont été créés pour apporter des précisions sur l’interface web et son comportement aux outils d’assistance technique. On pourra notamment relier les éléments entre eux (libellé et champ, comme vu plus haut), indiquer su’un message est une alerte, …

Les attributs ARIA se placent évidemment à l’intérieur de marqueurs, et commencent par le préfixe « aria-« .

Pour aller plus loin

Voici quelques sites qui complètement les explications sur les formulaires accessibles :

 

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.




Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.