From 9c3eb3245b0e937d6c2c61d126277bdd704e4bce Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 07:54:56 +0100 Subject: move *.html to *.md --- .../web/accessibility/aria/forms/alerts/index.html | 152 --------------------- .../web/accessibility/aria/forms/alerts/index.md | 152 +++++++++++++++++++++ .../aria/forms/basic_form_hints/index.html | 120 ---------------- .../aria/forms/basic_form_hints/index.md | 120 ++++++++++++++++ files/fr/web/accessibility/aria/forms/index.html | 20 --- files/fr/web/accessibility/aria/forms/index.md | 20 +++ .../aria/forms/multipart_labels/index.html | 38 ------ .../aria/forms/multipart_labels/index.md | 38 ++++++ 8 files changed, 330 insertions(+), 330 deletions(-) delete mode 100644 files/fr/web/accessibility/aria/forms/alerts/index.html create mode 100644 files/fr/web/accessibility/aria/forms/alerts/index.md delete mode 100644 files/fr/web/accessibility/aria/forms/basic_form_hints/index.html create mode 100644 files/fr/web/accessibility/aria/forms/basic_form_hints/index.md delete mode 100644 files/fr/web/accessibility/aria/forms/index.html create mode 100644 files/fr/web/accessibility/aria/forms/index.md delete mode 100644 files/fr/web/accessibility/aria/forms/multipart_labels/index.html create mode 100644 files/fr/web/accessibility/aria/forms/multipart_labels/index.md (limited to 'files/fr/web/accessibility/aria/forms') diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.html b/files/fr/web/accessibility/aria/forms/alerts/index.html deleted file mode 100644 index 588633fad9..0000000000 --- a/files/fr/web/accessibility/aria/forms/alerts/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Alertes -slug: Web/Accessibility/ARIA/forms/alerts -tags: - - ARIA - - Accessibilité - - Développement Web - - Formulaire -translation_of: Web/Accessibility/ARIA/forms/alerts -original_slug: Accessibilité/ARIA/formulaires/Alertes ---- -

Le problème

- -

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.

- -

Le formulaire

- -

Tout d’abord, veuillez lire la technique aria-required pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.

- -

Voici un formulaire simple :

- -
<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>
-
- -

Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)

- -

Vérification de la validité et avertissement de l’utilisateur

- -

Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :

- -
    -
  1. 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 « [ ] ».
    2. -
  2. Définissons l’attribut aria-invalid du champ et donnons lui la valeur true.
    3. -
  3. 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 alert, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre.
    4. -
- -

Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements onblur.

- -

La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :

- -
<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>
-
- -

La fonction checkValidity

- -

Le cœur est la fonction checkValidity. 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.

- -

Pour déterminer la validité, la fonction vérifie si l’indexOf de la valeur d’entrée est plus grande que -1. Une valeur de -1 ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur.

- -

Si non valide, la fonction fait deux choses :

- -
    -
  1. Elle définit l’attribut aria-invalid de l’élément à true, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct.
    2. -
  2. Elle appellera la fonction addAlert pour ajouter une alerte avec le message d’erreur donné.
    3. -
- -

Si le terme recherché est trouvé, l’attribut aria-invalid est réinitialisé à true. De plus, toute alerte qui subsisterait serait supprimée.

- -

La fonction addAlert

- -

Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant alert, et si elle en trouve un, l’enlève du modèle objet de document (DOM).

- -

Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID alert. 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 XHTML Role Attribut qui a été tout simplement porté sur HTML pour plus de simplicité.

- -

Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.

- -

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é.

- -

Ajouter de la magie à l’événement onblur

- -

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 :

- -
<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;!');"/>
-
- -

Test de l’exemple

- -

Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :

- -
    -
  1. 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.
    2. -
  2. 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.
    3. -
- -

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.

- -

Quelques questions qu’on peut se poser

- -
-
Q. Pourquoi mettre à la fois un (required) dans le texte du label et l’attribut aria-required sur certains éléments {{ HTMLElement("input") }} ?
-
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.
-
Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ?
-
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.
-
- -

Conclusion

- -

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.

diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.md b/files/fr/web/accessibility/aria/forms/alerts/index.md new file mode 100644 index 0000000000..588633fad9 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/alerts/index.md @@ -0,0 +1,152 @@ +--- +title: Alertes +slug: Web/Accessibility/ARIA/forms/alerts +tags: + - ARIA + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/alerts +original_slug: Accessibilité/ARIA/formulaires/Alertes +--- +

Le problème

+ +

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.

+ +

Le formulaire

+ +

Tout d’abord, veuillez lire la technique aria-required pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.

+ +

Voici un formulaire simple :

+ +
<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>
+
+ +

Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)

+ +

Vérification de la validité et avertissement de l’utilisateur

+ +

Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :

+ +
    +
  1. 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 « [ ] ».
    2. +
  2. Définissons l’attribut aria-invalid du champ et donnons lui la valeur true.
    3. +
  3. 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 alert, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre.
    4. +
+ +

Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements onblur.

+ +

La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :

+ +
<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>
+
+ +

La fonction checkValidity

+ +

Le cœur est la fonction checkValidity. 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.

+ +

Pour déterminer la validité, la fonction vérifie si l’indexOf de la valeur d’entrée est plus grande que -1. Une valeur de -1 ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur.

+ +

Si non valide, la fonction fait deux choses :

+ +
    +
  1. Elle définit l’attribut aria-invalid de l’élément à true, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct.
    2. +
  2. Elle appellera la fonction addAlert pour ajouter une alerte avec le message d’erreur donné.
    3. +
+ +

Si le terme recherché est trouvé, l’attribut aria-invalid est réinitialisé à true. De plus, toute alerte qui subsisterait serait supprimée.

+ +

La fonction addAlert

+ +

Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant alert, et si elle en trouve un, l’enlève du modèle objet de document (DOM).

+ +

Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID alert. 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 XHTML Role Attribut qui a été tout simplement porté sur HTML pour plus de simplicité.

+ +

Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.

+ +

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é.

+ +

Ajouter de la magie à l’événement onblur

+ +

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 :

+ +
<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;!');"/>
+
+ +

Test de l’exemple

+ +

Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :

+ +
    +
  1. 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.
    2. +
  2. 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.
    3. +
+ +

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.

+ +

Quelques questions qu’on peut se poser

+ +
+
Q. Pourquoi mettre à la fois un (required) dans le texte du label et l’attribut aria-required sur certains éléments {{ HTMLElement("input") }} ?
+
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.
+
Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ?
+
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.
+
+ +

Conclusion

+ +

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.

diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html deleted file mode 100644 index bee7b3fe5e..0000000000 --- a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Indications élémentaires pour les formulaires -slug: Web/Accessibility/ARIA/forms/Basic_form_hints -tags: - - ARIA - - Accessibilité - - Formulaire -translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints -original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires ---- -

Labels de formulaire

- -

Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant.

- -

L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un id, et chaque élément {{ HTMLElement("label") }} a un attribut for indiquant l’id de l’{{ HTMLElement("input") }} associé.

- -

Exemple 1. Formulaire basique avec labels

- -
<form>
-  <ul>
-    <li>
-      <input id="vin-1" type="checkbox" value="riesling"/>
-      <label for="vin-1">Berg Rottland Riesling</label>
-    </li>
-    <li>
-      <input id="vin-2" type="checkbox" value="weissbergunder"/>
-      <label for="vin-2">Weissbergunder</label>
-    </li>
-    <li>
-      <input id="vin-3" type="checkbox" value="pinot-grigio"/>
-      <label for="vin-3">Pinot Grigio</label>
-    </li>
-    <li>
-      <input id="vin-4" type="checkbox" value="gewurztraminer"/>
-      <label for="vin-4">Gewürztraminer</label>
-    </li>
-  </ul>
-</form>
-
- -

Labelliser avec ARIA

- -

L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. WAI-ARIA, la spécification Accessible Rich Internet Applications (Applications Internet Riches Accessibles) de la Web Accessibility Initiative (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut aria-labelledby dans ces cas de figure.

- -

L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut aria-labelledby de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’id de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.

- -

Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée

- -
<h3 id="rg1_label">Options du déjeuner</h3>
-
-<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
-  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Thaï
-  </li>
-  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Subway
-  </li>
-  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
-    <img role="presentation" src="radio-checked.gif" /> Libanais
-  </li>
-</ul>
-
- -

Décrire avec ARIA

- -

Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut aria-describedby pour associer directement une description à un contrôle donné.

- -

L’exemple ci-dessous montre un élément {{ HTMLElement("button") }} décrit par une phrase contenue dans un élément {{ HTMLElement("div") }} séparé. L’attribut aria-describedby du {{ HTMLElement("button") }} fait référence à l’id de l’élément {{ HTMLElement("div") }}.

- -

Exemple 3. Un bouton décrit par un élément séparé.

- -
<button aria-describedby="descriptionRevert">Annuler</button>
-<div id="descriptionRevert">L’annulation supprimera toutes les modifications
-                    intervenues depuis le dernier enregistrement.</div>
- -

(Notez que l’attribut aria-describedby est utilisé de différentes façons, en plus des contrôles de formulaires.)

- -

Champs obligatoires et invalides

- -

Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu :

- - - -

L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs aria-required sont définis à true (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut aria-invalid du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément).

- -

Exemple 4a. Un formulaire avec des champs obligatoires.

- -
<form>
-  <div>
-    <label for="nom">* Nom :</label>
-    <input type="text" value="nom" id="nom" aria-required="true"/>
-  </div>
-  <div>
-    <label for="telephone">Téléphone :</label>
-    <input type="text" value="telephone" id="telephone" aria-required="false"/>
-  </div>
-  <div>
-    <label for="courriel">* Courriel :</label>
-    <input type="text" value="courriel" id="courriel" aria-required="true"/>
-  </div>
-</form>
- -

Exemple 4b. Portion d’un script qui valide une entrée de formulaire.

- -
var validate = function () {
-  var emailElement = document.getElementById(emailFieldId);
-  var valid = emailValid(formData.email); // retourne true si valide, false dans le cas contraire
-
-  emailElement.setAttribute("aria-invalid", !valid);
-  setElementBorderColour(emailElement, valid); // colore la bordure en rouge sur le second argument est false
-};
- -

Fournir des messages d’erreur utiles

- -

Découvrez comment utiliser les alertes ARIA pour améliorer les formulaires.

- -

Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document WAI-ARIA Authoring Practices.

diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md new file mode 100644 index 0000000000..bee7b3fe5e --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md @@ -0,0 +1,120 @@ +--- +title: Indications élémentaires pour les formulaires +slug: Web/Accessibility/ARIA/forms/Basic_form_hints +tags: + - ARIA + - Accessibilité + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires +--- +

Labels de formulaire

+ +

Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant.

+ +

L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un id, et chaque élément {{ HTMLElement("label") }} a un attribut for indiquant l’id de l’{{ HTMLElement("input") }} associé.

+ +

Exemple 1. Formulaire basique avec labels

+ +
<form>
+  <ul>
+    <li>
+      <input id="vin-1" type="checkbox" value="riesling"/>
+      <label for="vin-1">Berg Rottland Riesling</label>
+    </li>
+    <li>
+      <input id="vin-2" type="checkbox" value="weissbergunder"/>
+      <label for="vin-2">Weissbergunder</label>
+    </li>
+    <li>
+      <input id="vin-3" type="checkbox" value="pinot-grigio"/>
+      <label for="vin-3">Pinot Grigio</label>
+    </li>
+    <li>
+      <input id="vin-4" type="checkbox" value="gewurztraminer"/>
+      <label for="vin-4">Gewürztraminer</label>
+    </li>
+  </ul>
+</form>
+
+ +

Labelliser avec ARIA

+ +

L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. WAI-ARIA, la spécification Accessible Rich Internet Applications (Applications Internet Riches Accessibles) de la Web Accessibility Initiative (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut aria-labelledby dans ces cas de figure.

+ +

L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut aria-labelledby de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’id de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.

+ +

Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée

+ +
<h3 id="rg1_label">Options du déjeuner</h3>
+
+<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
+  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Thaï
+  </li>
+  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Subway
+  </li>
+  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
+    <img role="presentation" src="radio-checked.gif" /> Libanais
+  </li>
+</ul>
+
+ +

Décrire avec ARIA

+ +

Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut aria-describedby pour associer directement une description à un contrôle donné.

+ +

L’exemple ci-dessous montre un élément {{ HTMLElement("button") }} décrit par une phrase contenue dans un élément {{ HTMLElement("div") }} séparé. L’attribut aria-describedby du {{ HTMLElement("button") }} fait référence à l’id de l’élément {{ HTMLElement("div") }}.

+ +

Exemple 3. Un bouton décrit par un élément séparé.

+ +
<button aria-describedby="descriptionRevert">Annuler</button>
+<div id="descriptionRevert">L’annulation supprimera toutes les modifications
+                    intervenues depuis le dernier enregistrement.</div>
+ +

(Notez que l’attribut aria-describedby est utilisé de différentes façons, en plus des contrôles de formulaires.)

+ +

Champs obligatoires et invalides

+ +

Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu :

+ + + +

L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs aria-required sont définis à true (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut aria-invalid du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément).

+ +

Exemple 4a. Un formulaire avec des champs obligatoires.

+ +
<form>
+  <div>
+    <label for="nom">* Nom :</label>
+    <input type="text" value="nom" id="nom" aria-required="true"/>
+  </div>
+  <div>
+    <label for="telephone">Téléphone :</label>
+    <input type="text" value="telephone" id="telephone" aria-required="false"/>
+  </div>
+  <div>
+    <label for="courriel">* Courriel :</label>
+    <input type="text" value="courriel" id="courriel" aria-required="true"/>
+  </div>
+</form>
+ +

Exemple 4b. Portion d’un script qui valide une entrée de formulaire.

+ +
var validate = function () {
+  var emailElement = document.getElementById(emailFieldId);
+  var valid = emailValid(formData.email); // retourne true si valide, false dans le cas contraire
+
+  emailElement.setAttribute("aria-invalid", !valid);
+  setElementBorderColour(emailElement, valid); // colore la bordure en rouge sur le second argument est false
+};
+ +

Fournir des messages d’erreur utiles

+ +

Découvrez comment utiliser les alertes ARIA pour améliorer les formulaires.

+ +

Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document WAI-ARIA Authoring Practices.

diff --git a/files/fr/web/accessibility/aria/forms/index.html b/files/fr/web/accessibility/aria/forms/index.html deleted file mode 100644 index 8759c01cbe..0000000000 --- a/files/fr/web/accessibility/aria/forms/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Formulaires -slug: Web/Accessibility/ARIA/forms -tags: - - ARIA - - Accessibilité - - Développement Web - - Formulaire -translation_of: Web/Accessibility/ARIA/forms -original_slug: Accessibilité/ARIA/formulaires ---- -

Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :

- - - -

Voir également l’article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais) (version archivée par archive.org), couvrant pour une bonne part le même sujet.

diff --git a/files/fr/web/accessibility/aria/forms/index.md b/files/fr/web/accessibility/aria/forms/index.md new file mode 100644 index 0000000000..8759c01cbe --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/index.md @@ -0,0 +1,20 @@ +--- +title: Formulaires +slug: Web/Accessibility/ARIA/forms +tags: + - ARIA + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms +original_slug: Accessibilité/ARIA/formulaires +--- +

Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :

+ + + +

Voir également l’article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais) (version archivée par archive.org), couvrant pour une bonne part le même sujet.

diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.html b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html deleted file mode 100644 index 5cb8dfa611..0000000000 --- a/files/fr/web/accessibility/aria/forms/multipart_labels/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Labels multi-options -slug: Web/Accessibility/ARIA/forms/Multipart_labels -tags: - - ARAI - - Accessibilité - - Développement Web - - Formulaire -translation_of: Web/Accessibility/ARIA/forms/Multipart_labels -original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options ---- -

Utiliser ARIA avec des labels comportant des champs

- -

Problème

- -

Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « Effacer l’historique après [x] jours. » « Effacer l’historique après » est à la gauche de la boîte texte, « x » est le nombre, par exemple 21, et le mot « jours » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre.

- -

Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « Effacer l’historique après 21 jours ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran.

- -

La solution se trouve dans l'attribut ARIA aria-labelledby. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible.

- -

aria-labelledby et aria-describedby sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle <label for>/<label> pouvant exister, sont neutralisées par aria-labelledby. Si, dans une page HTML vous fournissez aria-labelledby, vous devriez également fournir un <label for> afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir.

- -

Exemple :

- -
    <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" />
-    <span id="labelShutdown">Éteindre l’ordinateur après</span>
-    <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" />
-    <span id="shutdownUnit"> minutes</span>
-
- -

Pour les utilisateurs de JAWS 8

- -

JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le nomAccessible que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus.

- -

Peut-on faire la même chose sans ARIA ?

- -

Ben Millard fait remarquer dans un billet que  les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4, simplement en imbriquant l'élément input dans le label. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de aria-labelledby est encore la meilleure approche.

diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.md b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md new file mode 100644 index 0000000000..5cb8dfa611 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md @@ -0,0 +1,38 @@ +--- +title: Labels multi-options +slug: Web/Accessibility/ARIA/forms/Multipart_labels +tags: + - ARAI + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options +--- +

Utiliser ARIA avec des labels comportant des champs

+ +

Problème

+ +

Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « Effacer l’historique après [x] jours. » « Effacer l’historique après » est à la gauche de la boîte texte, « x » est le nombre, par exemple 21, et le mot « jours » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre.

+ +

Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « Effacer l’historique après 21 jours ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran.

+ +

La solution se trouve dans l'attribut ARIA aria-labelledby. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible.

+ +

aria-labelledby et aria-describedby sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle <label for>/<label> pouvant exister, sont neutralisées par aria-labelledby. Si, dans une page HTML vous fournissez aria-labelledby, vous devriez également fournir un <label for> afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir.

+ +

Exemple :

+ +
    <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" />
+    <span id="labelShutdown">Éteindre l’ordinateur après</span>
+    <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" />
+    <span id="shutdownUnit"> minutes</span>
+
+ +

Pour les utilisateurs de JAWS 8

+ +

JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le nomAccessible que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus.

+ +

Peut-on faire la même chose sans ARIA ?

+ +

Ben Millard fait remarquer dans un billet que  les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4, simplement en imbriquant l'élément input dans le label. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de aria-labelledby est encore la meilleure approche.

-- cgit v1.2.3-54-g00ecf