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 implicitement renseigner l’outil d’assistance technique sur les valeurs autorisées.

Rappel : depuis HTML5, certains marqueurs ont une fonction sémentique 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.

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.

 

Pour aller plus loin

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Les technologies pour palier le handicap