Étiquettes de formulaire : Exigences essentielles pour l'accessibilité des champs de saisie

Les formulaires sont une partie fondamentale du web. Des simples formulaires de contact aux processus complexes de paiement en e-commerce, ils permettent aux utilisateurs d'interagir avec les sites web et les applications. Cependant, des formulaires mal conçus peuvent créer des barrières importantes pour les utilisateurs en situation de handicap. Un élément crucial dans la création de formulaires accessibles est l'utilisation correcte des étiquettes de formulaire. Ce guide fournit un aperçu complet des exigences d'accessibilité des étiquettes de formulaire, garantissant que vos formulaires sont utilisables par tous, quelles que soient leurs capacités.

Pourquoi les étiquettes de formulaire accessibles sont-elles importantes ?

Les étiquettes de formulaire accessibles sont vitales pour plusieurs raisons :

• Utilisabilité : Des étiquettes claires et concises aident tous les utilisateurs à comprendre le but de chaque champ de saisie, améliorant ainsi l'utilisabilité globale.
• Accessibilité : Les étiquettes fournissent des informations essentielles aux utilisateurs en situation de handicap, en particulier ceux qui dépendent de technologies d'assistance comme les lecteurs d'écran. Sans étiquettes appropriées, ces utilisateurs pourraient être incapables de remplir les formulaires.
• Conformité WCAG : Les Règles pour l'accessibilité des contenus web (WCAG) exigent que tous les contrôles de formulaire aient des étiquettes associées. Le respect de ces directives garantit que votre site web est accessible et conforme à la loi dans de nombreuses juridictions.
• SEO : Bien que ce ne soit pas un facteur de classement direct, les sites web accessibles ont tendance à offrir une meilleure expérience utilisateur, ce qui peut indirectement améliorer les performances SEO.

Comprendre les exigences des WCAG pour les étiquettes de formulaire

Les WCAG fournissent des directives spécifiques pour garantir l'accessibilité des formulaires. Voici les principales exigences relatives aux étiquettes de formulaire :

Critère de succès WCAG 2.1 1.1.1 Contenu non textuel (Niveau A)

Bien qu'il ne concerne pas directement les étiquettes, ce critère souligne l'importance de fournir des alternatives textuelles pour tout contenu non textuel, y compris les CAPTCHA et les images utilisées dans les formulaires. Un formulaire correctement étiqueté est crucial pour fournir un contexte à ces alternatives.

Critère de succès WCAG 2.1 1.3.1 Informations et relations (Niveau A)

Les informations, la structure et les relations véhiculées par la présentation doivent pouvoir être déterminées par un programme ou être disponibles sous forme de texte. Cela signifie que la relation entre une étiquette et son champ de saisie correspondant doit être explicitement définie dans le code HTML.

Critère de succès WCAG 2.1 2.4.6 En-têtes et étiquettes (Niveau AA)

Les en-têtes et les étiquettes décrivent le sujet ou le but. Les étiquettes de formulaire fournissent un contexte descriptif pour les champs de saisie, ce qui permet aux utilisateurs de comprendre plus facilement la structure du formulaire et de le remplir correctement.

Critère de succès WCAG 2.1 3.3.2 Étiquettes ou instructions (Niveau A)

Des étiquettes ou des instructions sont fournies lorsque le contenu nécessite une saisie de l'utilisateur.

Critère de succès WCAG 2.1 4.1.2 Nom, rôle, valeur (Niveau A)

Pour tous les composants de l'interface utilisateur (y compris, mais sans s'y limiter, les éléments de formulaire, les liens et les composants générés par des scripts), le nom et le rôle peuvent être déterminés par un programme ; les états, propriétés et valeurs qui peuvent être définis par l'utilisateur peuvent être définis par un programme ; et la notification des modifications de ces éléments est disponible pour les agents utilisateurs, y compris les technologies d'assistance.

Meilleures pratiques pour l'implémentation d'étiquettes de formulaire accessibles

Voici plusieurs meilleures pratiques pour créer des étiquettes de formulaire accessibles :

1. Utilisez l'élément <label>

L'élément <label> est le principal moyen d'associer une étiquette textuelle à un champ de saisie. Il fournit une connexion sémantique et structurelle entre l'étiquette et le contrôle. L'attribut for de l'élément <label> doit correspondre à l'attribut id du champ de saisie correspondant.

Exemple :

<label for="name">Nom :</label>
<input type="text" id="name" name="name">

Exemple incorrect (à éviter) :

<span>Nom :</span>
<input type="text" id="name" name="name">

L'utilisation d'un élément span au lieu d'une label ne crée pas l'association programmatique nécessaire, ce qui le rend inaccessible aux lecteurs d'écran.

2. Associez explicitement les étiquettes aux champs de saisie

Assurez une association claire et explicite entre l'étiquette et le champ de saisie en utilisant les attributs for et id comme indiqué dans l'exemple ci-dessus.

3. Positionnez correctement les étiquettes

Le placement des étiquettes peut affecter l'utilisabilité. Généralement, les étiquettes doivent être placées :

• Au-dessus du champ de saisie : C'est souvent l'option la plus accessible et la plus conviviale, en particulier pour les champs de texte et les zones de texte.
• À gauche du champ de saisie : Courant, mais peut être moins efficace pour les utilisateurs ayant des déficiences visuelles qui peuvent avoir des difficultés à balayer la page.
• Pour les boutons radio et les cases à cocher : Les étiquettes doivent être placées à droite du contrôle.

Tenez compte des normes culturelles lors du positionnement des étiquettes. Dans certaines langues, les étiquettes sont traditionnellement placées après le champ de saisie. Adaptez votre conception pour tenir compte de ces préférences.

4. Fournissez des étiquettes claires et concises

Les étiquettes doivent être brèves, descriptives et faciles à comprendre. Évitez le jargon ou les termes techniques qui pourraient dérouter les utilisateurs. Par exemple, au lieu de "UserID", utilisez "Nom d'utilisateur" ou "Adresse e-mail". Pensez à la localisation. Assurez-vous que vos étiquettes sont facilement traduisibles dans différentes langues tout en conservant leur sens.

5. Utilisez les attributs ARIA si nécessaire

Les attributs ARIA (Accessible Rich Internet Applications) peuvent améliorer l'accessibilité des éléments de formulaire, en particulier dans des scénarios complexes. Cependant, utilisez ARIA avec discernement et uniquement lorsque les éléments et attributs HTML natifs sont insuffisants.

• aria-label : Utilisez cet attribut pour fournir une étiquette lorsqu'une étiquette visible n'est pas possible ou pratique.
• aria-labelledby : Utilisez cet attribut pour référencer l'ID d'un élément existant sur la page afin qu'il serve d'étiquette.
• aria-describedby : Utilisez cet attribut pour fournir des informations ou des instructions supplémentaires pour le champ de saisie. Ceci est utile pour fournir un contexte ou expliquer les règles de validation.

Exemple utilisant aria-label :

<input type="search" aria-label="Rechercher sur le site web">

Exemple utilisant aria-labelledby :

<h2 id="newsletter-title">Abonnement à la newsletter</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="Entrez votre adresse e-mail">

6. Regroupez les éléments de formulaire liés avec <fieldset> et <legend>

L'élément <fieldset> regroupe les contrôles de formulaire liés, et l'élément <legend> fournit une légende pour le fieldset. Cela améliore la structure du formulaire et facilite la compréhension des relations entre les différents champs de saisie pour les utilisateurs.

Exemple :

<fieldset>
  <legend>Coordonnées</legend>
  <label for="name">Nom :</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">E-mail :</label>
  <input type="email" id="email" name="email">
</fieldset>

7. Fournissez des messages d'erreur clairs

Lorsque les utilisateurs font des erreurs en remplissant un formulaire, fournissez des messages d'erreur clairs et informatifs qui expliquent ce qui n'a pas fonctionné et comment corriger l'erreur. Associez ces messages d'erreur aux champs de saisie correspondants à l'aide d'attributs ARIA comme aria-describedby.

Exemple :

<label for="email">E-mail :</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Veuillez entrer une adresse e-mail valide.</span>

Assurez-vous que le message d'erreur est visuellement distinct (par exemple, en utilisant de la couleur ou des icônes) et accessible de manière programmatique aux technologies d'assistance.

8. Utilisez un contraste de couleurs suffisant

Assurez un contraste de couleurs suffisant entre le texte de l'étiquette et la couleur de fond pour répondre aux exigences des WCAG. Utilisez un outil d'analyse de contraste des couleurs pour vérifier que le rapport de contraste respecte les exigences minimales (4.5:1 pour le texte normal et 3:1 pour le grand texte). Cela aide les utilisateurs malvoyants à lire les étiquettes plus facilement.

9. Assurez l'accessibilité au clavier

Tous les éléments de formulaire doivent être accessibles en utilisant uniquement le clavier. Les utilisateurs doivent pouvoir naviguer dans le formulaire à l'aide de la touche Tab et interagir avec les contrôles de formulaire à l'aide de la barre d'espace ou de la touche Entrée. Testez minutieusement vos formulaires avec un clavier pour garantir une bonne accessibilité au clavier.

10. Testez avec des technologies d'assistance

La meilleure façon de s'assurer que vos formulaires sont accessibles est de les tester avec des technologies d'assistance comme les lecteurs d'écran (par exemple, NVDA, JAWS, VoiceOver). Cela vous aidera à identifier les problèmes d'accessibilité qui pourraient ne pas être apparents lors de l'inspection visuelle. Impliquez des utilisateurs en situation de handicap dans votre processus de test pour obtenir des commentaires précieux et améliorer continuellement l'accessibilité de votre site web.

Exemples d'implémentations d'étiquettes de formulaire accessibles

Exemple 1 : Formulaire de contact simple (Perspective internationale)

Considérez un formulaire de contact pour un public mondial. Les étiquettes doivent être claires, concises et facilement traduisibles.

<form>
  <label for="name">Nom complet :</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Adresse e-mail :</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="country">Pays :</label>
  <select id="country" name="country">
    <option value="">Sélectionnez un pays</option>
    <option value="us">États-Unis</option>
    <option value="ca">Canada</option>
    <option value="uk">Royaume-Uni</option>
    <option value="de">Allemagne</option>
    <option value="fr">France</option>
    <option value="jp">Japon</option>
    <option value="au">Australie</option>
    <!-- Ajouter d'autres pays -->
  </select><br><br>

  <label for="message">Message :</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

  <input type="submit" value="Envoyer">
</form>

Notez l'utilisation de "Nom complet" au lieu de simplement "Nom" pour plus de clarté, en particulier pour les cultures où les noms de famille précèdent les prénoms.

Exemple 2 : Formulaire de paiement e-commerce

Les formulaires de paiement e-commerce nécessitent souvent des informations sensibles. Des étiquettes et des instructions claires sont cruciales pour instaurer la confiance et garantir l'accessibilité.

<form>
  <fieldset>
    <legend>Adresse de livraison</legend>
    <label for="shipping_name">Nom complet :</label>
    <input type="text" id="shipping_name" name="shipping_name"><br><br>

    <label for="shipping_address">Adresse :</label>
    <input type="text" id="shipping_address" name="shipping_address"><br><br>

    <label for="shipping_city">Ville :</label>
    <input type="text" id="shipping_city" name="shipping_city"><br><br>

    <label for="shipping_zip">Code postal :</label>
    <input type="text" id="shipping_zip" name="shipping_zip"><br><br>

    <label for="shipping_country">Pays :</label>
    <select id="shipping_country" name="shipping_country">
      <option value="">Sélectionnez un pays</option>
      <option value="us">États-Unis</option>
      <option value="ca">Canada</option>
      <!-- Ajouter d'autres pays -->
    </select>
  </fieldset>

  <fieldset>
    <legend>Informations de paiement</legend>
    <label for="card_number">Numéro de carte de crédit :</label>
    <input type="text" id="card_number" name="card_number"><br><br>

    <label for="expiry_date">Date d'expiration (MM/AA) :</label>
    <input type="text" id="expiry_date" name="expiry_date" placeholder="MM/AA"><br><br>

    <label for="cvv">CVV :</label>
    <input type="text" id="cvv" name="cvv"><br><br>
  </fieldset>

  <input type="submit" value="Passer la commande">
</form>

L'utilisation des fieldsets et des legends organise clairement le formulaire en sections logiques. Le texte de remplacement fournit des indications supplémentaires, mais n'oubliez pas que le texte de remplacement ne doit pas être utilisé en remplacement des étiquettes.

Exemple 3 : Formulaire d'inscription avec des attributs ARIA

Considérez un formulaire d'inscription où un pseudonyme est facultatif. En utilisant les attributs ARIA, nous pouvons fournir un contexte supplémentaire.

<form>
  <label for="username">Nom d'utilisateur :</label>
  <input type="text" id="username" name="username" required><br><br>

  <label for="password">Mot de passe :</label>
  <input type="password" id="password" name="password" required><br><br>

  <label for="nickname">Pseudonyme (Facultatif) :</label>
  <input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
  <span id="nickname-info">Ce pseudonyme sera affiché publiquement.</span><br><br>

  <input type="submit" value="S'inscrire">
</form>

L'attribut aria-describedby relie le champ de saisie du pseudonyme à un élément span qui fournit des informations supplémentaires sur la manière dont le pseudonyme sera utilisé.

Outils pour tester l'accessibilité des formulaires

Plusieurs outils peuvent vous aider à évaluer l'accessibilité de vos formulaires :

• Accessibility Insights : Une extension de navigateur qui identifie les problèmes d'accessibilité sur les pages web.
• WAVE (Web Accessibility Evaluation Tool) : Un outil en ligne qui évalue les pages web pour les erreurs d'accessibilité.
• axe DevTools : Une extension de navigateur qui effectue des tests d'accessibilité automatisés.
• Lecteurs d'écran (NVDA, JAWS, VoiceOver) : Tester avec des lecteurs d'écran est essentiel pour identifier les problèmes d'accessibilité qui peuvent ne pas être apparents lors des tests automatisés.

Conclusion

Les étiquettes de formulaire accessibles sont essentielles pour créer des expériences web inclusives. En suivant les meilleures pratiques décrites dans ce guide, vous pouvez vous assurer que vos formulaires sont utilisables par tous, quelles que soient leurs capacités. Donner la priorité à l'accessibilité ne profite pas seulement aux utilisateurs en situation de handicap, mais améliore également l'utilisabilité globale de votre site web pour tous les utilisateurs. N'oubliez pas de tester régulièrement vos formulaires avec des technologies d'assistance et d'impliquer les utilisateurs en situation de handicap dans votre processus de test pour obtenir des commentaires précieux et améliorer continuellement l'accessibilité de votre site web.

Adopter l'accessibilité n'est pas seulement une question de conformité ; il s'agit de créer un web plus inclusif et équitable pour tous. En investissant dans la conception de formulaires accessibles, vous démontrez un engagement envers l'inclusivité et créez une meilleure expérience utilisateur pour tous.