Comment pouvez-vous fournir des étiquettes accessibles pour les contrôles de formulaire?

L'article traite des méthodes pour rendre les étiquettes de contrôle des formulaires accessibles, en se concentrant sur les lecteurs d'écran. Les méthodes clés incluent l'utilisation & lt; label & gt; Éléments, attributs Aria et outils de test.

Comment pouvez-vous fournir des étiquettes accessibles pour les contrôles de formulaire?

La fourniture d'étiquettes accessibles pour les contrôles de formulaires est cruciale pour rendre les formulaires Web utilisables pour tous les utilisateurs, en particulier ceux qui comptent sur des technologies d'assistance comme les lecteurs d'écran. Voici quelques méthodes clés pour s'assurer que les étiquettes sont accessibles:

1. Utilisez l'élément <label></label> : Le moyen le plus simple d'associer une étiquette à un contrôle de formulaire consiste à utiliser l'élément <label></label> . Vous pouvez associer une étiquette à un contrôle soit en nilitant le contrôle dans l'élément <label></label> , soit en utilisant l'attribut for sur l'élément <label></label> qui correspond à l'attribut id sur le contrôle de formulaire.

    <code class="html"><!-- Nested Label --> <label> Username: <input type="text" name="username"> </label> <!-- Label with for attribute --> <label for="username">Username:</label> <input type="text" id="username" name="username"></code>

2. Fournir du texte descriptif: le texte de l'étiquette doit décrire clairement l'objectif du contrôle de forme. Évitez les étiquettes vagues comme "Entrez le texte ici" et utilisez à la place des spécifiques comme "Adresse e-mail".
3. Les étiquettes de position correctement: les étiquettes doivent être positionnées à proximité de leurs contrôles associés et alignées d'une manière qui rend la connexion claire à tous les utilisateurs. En règle générale, les étiquettes sont placées au-dessus ou à gauche des commandes.
4. Utilisez des titres et des espaces réservés de manière appropriée: Bien que les titres et les espaces réservés puissent compléter les étiquettes, ils ne devraient pas les remplacer. L'attribut title peut fournir des informations supplémentaires, mais l'étiquette principale doit être visible sur la page.
5. Évitez les étiquettes qui se chevauchent: assurez-vous que les étiquettes ne chevauchent pas leurs contrôles associés, car cela peut confondre les utilisateurs et rendre le formulaire plus difficile à utiliser.

Quelles sont les meilleures pratiques pour garantir que les étiquettes de formulaire sont accessibles aux lecteurs d'écran?

S'assurer que les étiquettes de formulaire sont accessibles aux lecteurs d'écran impliquent de suivre plusieurs meilleures pratiques:

1. Association explicite de l'étiquette: utilisez toujours l'élément <label></label> avec l'attribut for lié à l' id du contrôle de formulaire. Cela garantit que les lecteurs d'écran peuvent associer correctement l'étiquette au contrôle.
2. Évitez les étiquettes cachées: ne masquez pas les étiquettes hors écran à l'aide de CSS ( display: none , visibility: hidden , etc.), car cela peut empêcher les lecteurs d'écran d'accéder au texte de l'étiquette.
3. Utiliser ARIA Attributs: Lorsque l'association directe avec un <label></label> n'est pas possible (par exemple, dans des dispositions complexes), utilisez des attributs Aria comme aria-labelledby ou aria-label pour fournir un nom accessible pour le contrôle.

4. Contrôles liés au groupe: Utilisez <fieldset></fieldset> et <legend></legend> pour regrouper les contrôles de formulaire liés et fournir un contexte clair. L'élément <legend></legend> agit comme une étiquette pour l'ensemble du groupe, ce qui facilite la navigation pour les lecteurs d'écran.

    <code class="html"><fieldset> <legend>Contact Information</legend> <label for="name">Name:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> </fieldset></code>

5. Testez avec les lecteurs d'écran: testez régulièrement vos formulaires avec divers lecteurs d'écran (par exemple, NVDA, Jaws, Voiceover) pour s'assurer que les étiquettes sont annoncées correctement et que les utilisateurs peuvent facilement naviguer dans le formulaire.

Comment pouvez-vous utiliser les attributs Aria pour améliorer l'accessibilité des contrôles de formulaire?

Les attributs ARIA (accessibles riches Internet) peuvent améliorer l'accessibilité des contrôles de formulaire, en particulier lorsque les éléments HTML standard ne suffisent pas. Voici comment vous pouvez les utiliser:

1. Aria-label: Utilisez aria-label pour fournir un nom accessible pour un contrôle de formulaire lorsqu'une étiquette visible n'est pas présente.

    <code class="html"><input type="search" aria-label="Search site" placeholder="Search"></code>

2. ARIA-LABELLEDBY: Utilisez aria-labelledby pour référencer l'ID d'un autre élément qui fournit le texte de l'étiquette. Ceci est utile lorsque le texte de l'étiquette est fourni par un autre élément de la page.

    <code class="html"><h2 id="Search">Search</h2> <input type="search" aria-labelledby="search-heading" placeholder="Search"></code>

3. Aria-DescripdBy: Utilisez aria-describedby pour fournir des informations descriptives supplémentaires sur le contrôle de formulaire, qui peuvent être lues par les lecteurs d'écran après l'étiquette.

    <code class="html"><label for="password">Password:</label> <input type="password" id="password" name="password" aria-describedby="password-help"> <span id="password-help">Must be at least 8 characters long.</span></code>

4. ARIA-REQUITED: Utilisez aria-required pour indiquer si l'utilisateur doit remplir une valeur avant de soumettre le formulaire.

    <code class="html"><label for="username">Username:</label> <input type="text" id="username" name="username" aria-required="true"></code>

5. Aria-invalid: Utilisez aria-invalid pour indiquer que la valeur entrée dans un champ de saisie n'est pas conforme au format attendu par l'application.

    <code class="html"><label for="email">Email:</label> <input type="email" id="email" name="email" aria-invalid="true"></code>

En utilisant ces attributs ARIA, vous pouvez améliorer l'accessibilité de vos contrôles de formulaire et fournir un meilleur support aux utilisateurs des technologies d'assistance.

Quels outils peuvent aider à tester l'accessibilité des étiquettes sur les contrôles de formulaire?

Plusieurs outils peuvent aider à tester l'accessibilité des étiquettes sur les contrôles de formulaire. Voici quelques-uns des plus utiles:

1. WAVE (Tool d'évaluation de l'accessibilité Web): Wave est un outil en ligne gratuit qui met en évidence les problèmes liés à l'accessibilité sur les pages Web. Il peut identifier les problèmes avec les étiquettes, y compris les étiquettes manquantes ou mal associées.
2. AX Devtools: une extension du navigateur par les systèmes Deque qui s'intègre à Chrome et à d'autres navigateurs pour fournir des audits d'accessibilité en temps réel. Il peut vérifier l'association des étiquettes et fournir des rapports détaillés.
3. Lighthouse: Un outil open source intégré dans Chrome Devtools qui effectue des audits sur les pages Web, y compris les vérifications d'accessibilité. Il peut faire rapport sur les problèmes avec les étiquettes de formulaire.
4. Lecteurs d'écran: des outils comme NVDA (accès de bureau non visuel), des mâchoires (accès au travail avec la parole) et une voix off peuvent être utilisées pour tester manuellement la façon dont vos étiquettes de formulaire sont annoncées aux utilisateurs.
5. A11Y.CSS: Une feuille de style CSS qui met en évidence les problèmes d'accessibilité courants sur une page Web, y compris les problèmes avec les étiquettes.
6. Informations sur l'accessibilité: un outil de Microsoft qui aide les développeurs à trouver et à résoudre les problèmes d'accessibilité. Il fournit des conseils étape par étape sur la façon d'améliorer l'accessibilité de l'étiquette.
7. Tenon.io: un service payant qui fournit des rapports d'accessibilité détaillés, y compris les chèques pour l'association d'étiquette et d'autres problèmes d'accessibilité liés aux formulaires.

En utilisant ces outils, vous pouvez tester et vous assurer efficacement que vos étiquettes de formulaire sont accessibles à tous les utilisateurs, y compris ceux qui comptent sur les technologies d'assistance.

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!