"Pour le aria-describedby je trouve que c'est un confort supplémentaire mais je
note ta remarque."
En loccurrence ça ne fonctionne pas et c'est tant mieux parce que ce que tu
provoquerais est donc la vocalisation de tous les contenus identifiés dans la
référence du describedby donc tout le contenu du label (votre prénom, l'input,
l'alerte) qui serait donc vocalisé deux fois (théoriquement à l'infini puisque
la référence est circulaire).
Du point de vue du confort c'est discutable ;)
Le meilleur motif dans ton cas c'est :
<label for="firstname">
> Votre prénom *
></label>
> <input type="text" aria-describedby="toto" id="firstname"
>aria-required="true" />
<p class="erreur" role="alert" id="toto">Veuillez saisir votre prénom.</p>
>
Si tu utilise un label implicite le motif le plus efficace est tout simplement :
<label for="firstname">
> Votre prénom *
> <input type="text" id="firstname" aria-required="true"/>
<span role="alert">Veuillez saisir votre prénom.</span>
></label>
Mais le label explicite est considéré comme étant plus robuste.
Pour l'utilisation de aria-invalid, tu peux l'utiliser mais je n'en vois pas
l'intérêt l'obligation de saisie est signalée, le message d'erreur est clair,
je ne vois pas d'intérêt à signaler, en plus, que la valeur entrée est
"invalide".
Il est préférable de réserver aria-invalid dans le cas d'une valeur saisie qui
ne correspond pas au format attendu.
JPV
________________________________
Jean-Pierre Villain - Qelios - 06 98 08 50 49
________________________________
De : Olivier Keul <[email protected]>
À : "[email protected]" <[email protected]>
Envoyé le : Vendredi 28 février 2014 9h30
Objet : Re: [Liste GTA] Formulaire et retour d'erreur
Salut Victor,
Effectivement c'est une erreur, on est d'accord pour le aria-required et
aria-invalid sur l'input.
<label for="firstname">
> Votre prénom *
> <input type="text" id="firstname" aria-required="true"
>aria-invalid="true" />
<span class="erreur" aria-describedby="firstname" role="alert">Veuillez
saisir votre prénom.</span>
></label>
Par contre pourquoi le role ne te semble pas pertinent ? Je trouve que
justement cela permet d'indiquer à l'utilisateur une erreur qu'il doit corriger
si il veut poursuivre.
Pour le aria-describedby je trouve que c'est un confort supplémentaire mais je
note ta remarque.
Le 27 février 2014 18:49, Victor Brito <[email protected]> a écrit :
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
>Sur les réseaux sociaux
> * Suivre Victor Brito sur Twitter
> * Suivre Victor Brito sur Diaspora
>Sans oublier
> * La fiche de membre du Groupe de Travail Accessiweb
> * Halte à la balkanisation du Web !
> * Un seul Web
> * Profession intégrateur (X)HTML / CSS
> * Tuyaux de l'accessibilité
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
>
>
_______________________________________________
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
