Le , par Fabrice Bonny - Accessibilité
Avertissement : cet article a été publié en 2008. Son contenu n'est peut-être plus d'actualité.
Comment concilier accessibilité, conformité aux standards et design dans un formulaire ? Il est toujours difficile de concilier les contraintes visuelles du design et les contraintes techniques des standards et de l’accessibilité. C’est encore plus vrai sur un formulaire. Un des points les plus problématiques concerne la mise en place des indications concernant les champs à remplir. Quel champ est obligatoire, quel format est requis, etc ?
Une pratique courante consiste à ajouter une étoile derrière les champs qui doivent obligatoirement être renseignés. Cela se combine avec l’erreur courante de n’indiquer cette convention qu’après le formulaire. Pire encore dans le cas d’une synthèse vocale, cet « * » sera le plus souvent ignoré car en dehors du label.
Pour remédier à cela, une idée me trottait dans la tête depuis quelques temps. Profitant de notre voyage commun en direction de Paris Web, j’ai demandé à Laurent Denis de faire quelques tests, entre autre sur Jaws. Bingo, ça marche ! Les deux parties du label complet sont bien lus.
Mais quelle est cette idée ?! Il s’agit tout simplement d’utiliser la possibilité d’imbriquer classiquement un élément de formulaire dans un label mais en écrivant les données complémentaires après ce champ mais à l’intérieur du label. Attention toutefois à bien indiquer le champ concerné grâce à l’attribut for, même si le label est implicitement lié au champ. Je livre un exemple minimaliste à vos tests, critiques et commentaires.
Mise à jour : ajout d’un title sur les *