Salut, Olivier, bonsoir, la liste,
Pour ma part, j'insérerais les attributs aria-required et aria-invalid
dans l'élément input et me passerais d'aria-describedby, puisque
l'élément span est enfant de l'élément label. Quant au role alert, il ne
me semble pas pertinent. Pour le reste, rien à dire.
Victor
Victor Brito Intégrateur XHTML / CSS -- Expert Accessiweb en évaluation
39 rue Charles Laffitte 92200 Neuilly-sur-Seine Tél. : +33 6 03 15 89 57
SIRET : 789 766 334 00013
Consulter le site Web professionnel de Victor Brito
<http://www.victor-brito.fr>
Sur les réseaux sociaux
* Suivre Victor Brito sur Twitter <http://twitter.com/victorbritopro>
* Suivre Victor Brito sur Diaspora
<https://joindiaspora.com/u/victorbritopro>
Sans oublier
* La fiche de membre du Groupe de Travail Accessiweb
<http://www.accessiweb.org/index.php/fiche_gta/items/site_victor_brito.html>
* Halte à la balkanisation du Web !
<http://halte-a-la-balkanisation-du-web.fr>
* Un seul Web <http://un-seul-web.fr>
* Profession intégrateur (X)HTML / CSS
<http://profession-integrateur-xhtml-css.fr>
* Tuyaux de l'accessibilité <http://tuyauxa11y.info>
Le 27/02/2014 18:45, Olivier Keul a écrit :
Bonjour la liste,
Je m'interroge sur la meilleure manière de gérer le retour d'erreur
sur un formulaire.
Est-ce qu'un markup de ce style vous semble /bulletproof/ ou bien
c'est déconnant ?
<label for="firstname">
Votre prénom *
<input type="text" id="firstname" />
<span class="erreur" aria-required="true" aria-invalid="true"
aria-describedby="firstname" role="alert">Veuillez saisir votre
prénom.</span>
</label>
On a :
* la classique association for / ID respectivement sur le label et
l'input
* l'attribut aria-required à true pour indiquer le caractère
obligatoire du champ
* l'attribut aria-invalid à true qui indique qu'il y a une erreur
* l'attribut aria-describedby qui permet de faire l'association avec
l'input
* l'attribut role avec la valeur alert qui permet d'indiquer à la
synthèse qu'il y a eu un changement
Merci d'avance pour vos retours,
Olivier
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
_______________________________________________
liste_gta mailing list
[email protected]
http://list.accessiweb.org/mailman/listinfo/liste_gta_list.accessiweb.org
