diff options
Diffstat (limited to 'files/fr/web/accessibility/aria/forms/alerts/index.html')
| -rw-r--r-- | files/fr/web/accessibility/aria/forms/alerts/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.html b/files/fr/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..24afd909f4 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,157 @@ +--- +title: Alertes +slug: Accessibilité/ARIA/formulaires/Alertes +tags: + - ARIA + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +<h2 id="Le_problème">Le problème</h2> + +<p>Vous avez un formulaire – par exemple un formulaire de contact – pour lequel vous voulez ajouter des contrôles d’erreurs accessibles. Les problèmes les plus courants sont une adresse électronique non valide, ou un nom qui ne contient pas un nom de famille ou un prénom.</p> + +<h2 id="Le_formulaire">Le formulaire</h2> + +<p>Tout d’abord, veuillez lire la <a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires" rel="nofollow" title="Indications élémentaires pour les formulaires">technique <code>aria-required</code></a> pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.</p> + +<p>Voici un formulaire simple :</p> + +<pre class="brush: html"><form method="post" action="post.php"> +<fieldset> + <legend>Veuillez saisir les détails du contact</legend> + <label for="nom">Votre nom (obligatoire):</label> + <input name="nom" id="nom" aria-required="true"/> + <br /> + <label for="courriel">Adresse électronique (obligatoire):</label> + <input name="courriel" id="courriel" aria-required="true"/> + <br /> + <label for="siteweb">Site Web (facultatif):</label> + <input name="siteweb" id="siteweb"/> +</fieldset> +<label for="message">Veuillez saisir votre message (obligatoire):</label> +<br /> +<textarea name="message" id="message" rows="5" cols="80" + aria-required="true"></textarea> +<br /> +<input type="submit" name="submit" value="Envoyer le message"/> +<input type="reset" name="reset" value="Réinitialiser le formulaire"/> +</form> +</pre> + +<p>Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)</p> + +<h2 id="Vérification_de_la_validité_et_avertissement_de_l’utilisateur"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">Vérification de la validité et avertissement de l’utilisateur</span></h2> + +<p>Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :</p> + +<ol> + <li>Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « [ ] ».</li> + <li>Définissons l’attribut <code>aria-invalid</code> du champ et donnons lui la valeur <code>true</code>.</li> + <li>Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript <code>alert</code>, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre.</li> +</ol> + +<p>Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements <code>onblur</code>.</p> + +<p>La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :</p> + +<pre class="brush: javascript"><script type="application/javascript"> +function removeOldAlert() +{ + var oldAlert = document.getElementById("alert"); + if (oldAlert) + document.body.removeChild(oldAlert); +} +<br/> +function addAlert(aMsg) +{ + removeOldAlert(); + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var msg = document.createTextNode(aMsg); + newAlert.appendChild(msg); + document.body.appendChild(newAlert); +} +<br/> +function checkValidity(aID, aSearchTerm, aMsg) +{ + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + addAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + removeOldAlert(); + } +} +</script> +</pre> + +<h2 id="La_fonction_checkValidity_2"><span class="mw-headline" id="La_fonction_checkValidity">La fonction <code>checkValidity</code></span></h2> + +<p>Le cœur est la fonction <code>checkValidity</code>. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte.</p> + +<p>Pour déterminer la validité, la fonction vérifie si l’<code>indexOf</code> de la valeur d’entrée est plus grande que <code>-1</code>. Une valeur de <code>-1</code> ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur.</p> + +<p>Si non valide, la fonction fait deux choses :</p> + +<ol> + <li>Elle définit l’attribut <code>aria-invalid</code> de l’élément à <code>true</code>, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct.</li> + <li>Elle appellera la fonction <code>addAlert</code> pour ajouter une alerte avec le message d’erreur donné.</li> +</ol> + +<p>Si le terme recherché est trouvé, l’attribut <code>aria-invalid</code> est réinitialisé à <code>true</code>. De plus, toute alerte qui subsisterait serait supprimée.</p> + +<h2 id="La_fonction_addAlert_2"><span class="mw-headline" id="La_fonction_addAlert">La fonction <code>addAlert</code></span></h2> + +<p>Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant <code>alert</code>, et si elle en trouve un, l’enlève du modèle objet de document (DOM).</p> + +<p>Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID <code>alert</code>. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="XHTML Role Attribut Module">XHTML Role Attribut</a> qui a été tout simplement porté sur HTML pour plus de simplicité.</p> + +<p>Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.</p> + +<p>Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné.</p> + +<h2 id="Ajouter_de_la_magie_à_l’événement_onblur"><span class="mw-headline" id="Ajouter_de_la_magie_a_l_evenement_onblur">Ajouter de la magie à l’événement <code>onblur</code></span></h2> + +<p>Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit :</p> + +<pre class="brush: html"><input name="nom" id="nom" aria-required="true" + onblur="checkValidity('nom', ' ', 'Le nom saisi est invalide&nbsp;!');"/> +<br /> +<input name="courriel" id="courriel" aria-required="true" + onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie est invalide&nbsp;!');"/> +</pre> + +<p><strong>Test de l’exemple</strong></p> + +<p>Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :</p> + +<ol> + <li>Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur.</li> + <li>Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide.</li> +</ol> + +<p>Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge.</p> + +<h2 id="Quelques_questions_qu’on_peut_se_poser"><span class="mw-headline" id="Quelques_questions_qu_on_peut_se_poser">Quelques questions qu’on peut se poser</span></h2> + +<dl> + <dt>Q. Pourquoi mettre à la fois un <code>(required)</code> dans le texte du label et l’attribut <code>aria-required</code> sur certains éléments {{ HTMLElement("input") }} ?</dt> + <dd>R. Si nous avions un véritable formulaire dynamique et que le site était visité par un navigateur ne prenant pas en charge ARIA, nous voudrions tout de même donner une indication sur l’obligation de remplir le champ.</dd> + <dt>Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ?</dt> + <dd>R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire.</dd> +</dl> + +<div class="warning"> +<p>TBD : let's rethink this – personally, I think setting focus might be good if done without causing a keyboard trap.</p> + +<p>()Il faudrait y réfléchir – personnellement, je pense que définir le focus peut être une bonne chose si c’est fait sans causer de perturbation à la navigation au clavier).</p> +</div> + +<h2 id="Conclusion"><span class="mw-headline" id="In_conclusion">Conclusion</span></h2> + +<p>L’accessibilité des sites web est grandement améliorée lorsqu’on fournit des alertes accessibles pour la validation côté client. Il n’y a rien de plus frustrant pour un utilisateur que de remplir un formulaire d’une vingtaine de champs, voire plus, de le soumettre, de constater que seuls quelques champs ne sont pas correctement renseignés et de devoir tout recommencer depuis le début pour s’assurer que les valeurs sont correctement mémorisées, ou de fournir des informations redondantes.</p> |