Création de formulaires HTML accessibles: un guide complet

Les formulaires bien conçus nécessitent une attention à l'accessibilité et s'assurer qu'ils sont disponibles pour tous les utilisateurs. 1. Utilisez correctement l'étiquette d'étiquette pour associer la boîte d'entrée pour éviter de compter uniquement sur l'espace réservé; 2. Assurez-vous que le formulaire peut être utilisé via le clavier, prend en charge l'onglet, les touches ENTER et ARROW et utiliser Tabindex raisonnablement; 3. Fournir des invites d'erreur claires, combiner des descriptions Aria-Live et du texte pour éviter d'utiliser uniquement les marques de couleur; 4. Utilisez les types d'entrée appropriés et les attributs de saisie semi-automatique pour optimiser l'expérience d'entrée et améliorer l'accessibilité.

Les formes sont au cœur des interactions Web, mais beaucoup de gens ignorent leur accessibilité. Un formulaire bien conçu doit non seulement fonctionner correctement, mais également être facile pour tous les utilisateurs, y compris ceux qui utilisent des lecteurs d'écran, les utilisateurs de navigation au clavier et ceux qui ont d'autres besoins en technologie d'assistance. Pour ce faire, la structure et la sémantique HTML doivent être claires et précises.

Contrôles de formulaire corrects avec étiquette

Chaque boîte d'entrée doit avoir une balise <label></label> correspondante explicite et être associée à l' id de la zone d'entrée via l'attribut for . Cela aide non seulement le lecteur d'écran à lire correctement le contenu de la balise, mais permet également à la balise d'être automatiquement focalisée sur la zone d'entrée correspondante lors de la clic dessus, en améliorant la convivialité.

Par exemple:

 <étiquette pour = "e-mail"> Adresse e-mail: </bétique>
<entrée type = "e-mail" id = "e-mail" name = "e-mail">

S'il n'est pas correctement lié, le lecteur d'écran peut ne pas reconnaître l'objectif de la zone d'entrée, ce qui a eu la confusion à l'utilisateur. Dans le même temps, évitez d'utiliser uniquement l'espace réservé pour expliquer la signification du champ, car de nombreux lecteurs d'écran ne les liront pas comme des informations principales.

Assurez-vous que le formulaire peut être utilisé via le clavier

Certains utilisateurs n'utilisent pas la souris et ne s'appuient pas entièrement sur la navigation au clavier. Par conséquent, votre formulaire doit prendre en charge la commutation de la clé de l'onglet, entrez la soumission des clés et utiliser la sélection des touches fléchées dans le menu déroulant ou les boutons radio.

• Utilisez tabindex pour contrôler l'ordre de mise au point (mais ne vous en abusez pas)
• Assurez-vous que le message d'erreur est également accessible via le clavier
• Des composants tels que les menus déroulants, les cases à cocher, etc. doivent prendre en charge l'interaction du clavier

Par exemple, une zone de sélection déroulante personnalisée qui ne gère pas les événements du clavier peut entraîner l'utilisation de certains utilisateurs. À l'heure actuelle, vous pouvez envisager d'utiliser des éléments natifs <select> , ou vous assurer que les composants personnalisés implémentent le rôle ARIA et la prise en charge du clavier.

Fournir des invites d'erreur claires et des commentaires de vérification

Lorsque l'utilisateur remplit une erreur, le message d'erreur doit apparaître près de l'élément de formulaire et être lu par le lecteur d'écran. Vous pouvez utiliser aria-live ou insérer directement des invites de texte.

• Le message d'erreur doit spécifier le problème, et non "Veuillez saisir la valeur correcte"
• N'utilisez pas seulement les couleurs pour identifier les erreurs (telles que les bordures rouges), mais utilisez également des invites de texte
• Vérifiez le front-end avant de vous engager et de vérifier à nouveau sur le back-end

Par exemple:

 <div class = "error" aria-live = "polit">
  Le format d&#39;e-mail est incorrect, veuillez rentrer.
</div>

Si vous changez simplement le style sans fournir d'informations très lisibles, les utilisateurs malvoyants peuvent ne pas savoir où quelque chose a mal tourné.

Utilisez le type d'entrée approprié et l'attribut Ambordage automatique

Les navigateurs et les appareils mobiles modernes peuvent optimiser l'expérience d'entrée en fonction du type de <input> . Par exemple:

• L'utilisation type="email" évoquera un clavier avec le symbole @
• Utiliser type="tel" convient plus à la saisie du numéro de téléphone
• L'ajout d'attribut d' autocomplete peut aider les utilisateurs à remplir rapidement des champs communs

exemple:

 <entrée type = "e-mail" automatique AutoClelet = "Email">
<input type = "text" AutoChatletel = "name">

Ces petits détails améliorent non seulement l'expérience utilisateur, mais aident également à l'accès sans barrière.

Fondamentalement, c'est tout. Tant que vous accordez plus d'attention à la structure, à la sémantique et à la logique interactive pendant le processus de développement, vous pouvez créer une forme HTML à la fois belle et facile d'accès.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!