Éléments d'entrée accessibles | les bases

TL;DR : Quelle que soit la taille d'un composant, assurez-vous toujours de prendre en compte une variété d'utilisateurs différents et leurs capacités lors de la mise en œuvre. À première vue, les éléments de saisie tels qu'une case à cocher peuvent sembler une solution simple, mais il reste encore quelques éléments à prendre en compte afin de s'assurer qu'ils sont accessibles.

Cette série abordera différents types d'éléments d'entrée et comment les rendre plus accessibles, en commençant par les bases : utiliser le type d'entrée correct et associer une étiquette.

Jetons un coup d'oeil.

Choisir le bon type d'entrée

Lors de l'utilisation d'éléments d'entrée en HTML, nous voulons nous assurer de toujours définir le type d'entrée correct pour l'élément correspondant. Le type de saisie par défaut est le texte et peut fonctionner dans de nombreux cas, mais être aussi précis que possible aide tous vos utilisateurs - et est livré avec de nombreuses fonctionnalités inhérentes. par exemple, définit un champ de saisie numérique, ouvre le pavé numérique sur les mobiles au lieu du clavier et vous pouvez restreindre la plage en utilisant des nombres minimum et maximum. masque l'entrée correspondante et protège donc la vie privée des utilisateurs. Selon le navigateur, ouvre un sélecteur de date,... et ainsi de suite. En choisissant le type de saisie correct, nous nous simplifions la vie, en pouvant utiliser certaines fonctionnalités héritées du HTML et en améliorant en même temps l'expérience utilisateur.

S'assurer qu'il y a toujours une étiquette associée à vos éléments d'entrée

Quel que soit le type de saisie que vous utilisez, assurez-vous d'associer une étiquette à votre champ de saisie. Habituellement, cela peut être fait avec un élément et l'attribut for.

<label for="firstname">First name:</label>
<input type="text" name="firstname">



<h3>
  
  
  aria-label vs. aria-labelledby
</h3>

<p>In a case in which a visual label is not an option or can't be associated with input element in the above mentioned way, aria-labels can also be used to identify form controls. If you are familiar with ARIA a little bit, you may be aware that the preferred option, if possible, is to work without aria whenever possible - however, in the real life of course, this isn't always feasible. </p>

<h4>
  
  
  aria-label
</h4>

<p>An aria-label can be used when no visible text label is present, for example, when an icon button is used without any text.<br>
</p>

<pre class="brush:php;toolbar:false"><button aria-label="Search"><img src="search-icon.svg" alt=""></button>

aria-labelledby

Lorsqu'un autre élément est utilisé comme référence pour étiqueter l'entrée, aria-labelledby s'avère pratique.

<div role="dialog">



<p>Dans la mesure du possible, essayez d'utiliser du HTML sémantique pour fournir des noms accessibles pour vos éléments d'entrée. Seulement si vous vous êtes assuré que ce n'est pas possible dans ce cas spécifique, revenez à l'utilisation des attributs aria. </p>

<p>Une fois que nous avons maîtrisé ces bases, comme utiliser la structure sémantique, ajouter le type d'entrée correct et associer des étiquettes, nous pouvons examiner de plus près les autres aspects permettant de rendre nos éléments d'entrée plus accessibles, tels que les éléments d'entrée désactivés, style de mise au point, contrastes de couleurs et navigation au clavier attendue. </p>

<p><strong>Ressources :</strong></p>

• W3Schools : types d'entrée HTML
• Contrôles d'étiquetage - W3
• Collectif A11y - Aria-label vs. aria-labelledby

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!