Commandes d’étiquetage

Bon exemple : Associer explicitement les étiquettes en utilisant les attributs for/id

Utiliser l’élément <label> pour associer explicitement le texte aux éléments du formulaire, dans la mesure du possible. L’attribut for de l’étiquette doit correspondre exactement au id de la commande de formulaire. Privilégiez l'utilisation de l'élément HTML <label> pour associer les commandes pour nommer les contrôles de formulaire plutôt que l'utilisation d'un label ARIA.

HTML

Début du code

<div class="form-group">
   <label for="firstname">Prénom<label>
   <input type="text" name="firstname" id="firstname">
</div>
<div class="form-group">
   <input type="checkbox" name="married" id="married">
   <label for="married">Marié(e)</label>
</div>

Fin du code

Bon exemple : Masquer visuellement l’élément d’étiquette

Masquez visuellement l'élément <label> afin d'éviter la redondance pour les utilisateurs qui peuvent identifier le but visuellement. Dans cet exemple, la classe WET .wb-inv masque efficacement l'étiquette "Search" aux utilisateurs voyants, mais l'élément est toujours présent dans le HTML et est rencontré par les utilisateurs de technologies d'assistance.

HTML

Début du code

<label for="search" class="wb-inv">Search</label> 
<input type="text" name="search" id="search"> 
<button type="submit">Search</button>

Fin du code

CSS

Début du code

.wb-inv {
   clip: rect(1px,1px,1px,1px);
   height: 1px;
   margin: 0;
   overflow: hidden;
   position: absolute;
   width: 1px;
}

Fin du code

Utilisez la classe BOEW .wb-inv pour masquer visuellement un élément, conformément au guide de style de la BOEW : Contenu visible et invisible.

Bon exemple : Utiliser aria-label

Utiliser un attribut aria-label pour nommer les saisies et autres commandes directement avec du texte non visuel. Cette approche ne doit être utilisée que lorsque l’étiquette de la commande ne correspond pas au contenu environnant. L’information contenue dans aria-label n’est pas affichée visuellement.

Dans cet exemple, un champ de saisie de recherche n'a pas besoin d'étiquette visuelle puisque le bouton d'envoi situé juste à côté porte l'étiquette "Recherche". Comme les utilisateurs non voyants rencontrent le contenu de manière linéaire, en lisant le champ de saisie avant le bouton, nous nommons le champ de saisie avec l'attribut aria-label.

HTML

Début du code

<input type="text" name="search" aria-label="Recherche">  
<button type="submit">Recherche</button>

Fin du code

Bon exemple : Utilisation d’aria-labelledby pour concaténer une étiquette provenant de plusieurs sources

Une <label> ne peut pointer que vers une seule commande de formulaire. Avec aria-labelledby, un élément peut aider à étiqueter de nombreuses commandes de formulaire, et une commande de formulaire peut être étiquetée par de nombreux éléments.

Utiliser un attribut aria-labelledby pour identifier les entrées de formulaires et autres commandes avec des noms extraits des éléments environnants. Cette approche ne doit être utilisée que lorsque l’étiquette de la commande ne correspond pas au contenu environnant.

Dans cet exemple, chaque service est accompagné d’un bouton « Ajouter au panier ». Un attribut aria-labelledby permet de distinguer les boutons les uns des autres en concaténant un nom à partir du bouton lui-même et de l’en-tête qui précède (p. ex., « Ajouter au panier Service 1 »). L’attribut aria-labelledby contient les valeurs d’attribut id des éléments avec les noms descriptifs. Comme l’illustre cet exemple, l’attribut aria-labelledby peut construire un nom en partie à partir de son propre nom d’élément natif.

HTML

Début du code

<h3 id="service1">Service 1</h3>
<p>[paragraphe descriptif]</p>
<button id="add1" aria-labelledby="add1 service1" type="submit">
   Ajouter au panier
</button>

<h3 id="service2">Service 2</h3>
<p>[paragraphe descriptif]</p>
<button id="add2" aria-labelledby="add2 service2" type="submit">
   Ajouter au panier
</button>

<h3 id="service3">Service 3</h3>
<p>[paragraphe descriptif]</p>
<button id="add3" aria-labelledby="add3 service3" type="submit">
   Ajouter au panier
</button>

Fin du code

Bon exemple : Utilisation d’aria-labelledby pour concaténer une étiquette provenant de plusieurs sources

Dans l’exemple ci-dessous, les saisies de texte utilisent aria-labelledby pour faire référence aux cellules d’en-tête de ligne et d’en-tête de colonne.

<table>
   <thead>
      <tr>
         <th scope="col">Nom</th>
         <th id="officenum" scope="col">Numéro du bureau</th>
         <th id="phonelabel" scope="col">Téléphone</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th id="cyndi" scope="row">Cyndi</th>   
         <td>
            <input type="text" size="4" name="office1" aria-labelledby="cyndi officenum">
         </td>
         <td>
            <input type="text" size="12" name="phone1" aria-labelledby="cyndi phonelabel">
         </td>
      </tr>
      <tr>
         <th id="jared" scope="row">Jared</th>
         <td>
            <input type="text" size="4" name="office2" aria-labelledby="jared officenum">
         </td>
         <td>
            <input type="text" size="12" name="phone2" aria-labelledby="jared phonelabel">
         </td>
      </tr>
      <tr>
         <th id="jon" scope="row">Jonathan</th>
         <td>
            <input type="text" size="4" name="office3" aria-labelledby="jon officenum">
         </td>
         <td>
            <input type="text" size="12" name="phone3" aria-labelledby="jon phonelabel">
         </td>
      </tr>
   </tbody>
</table>

Bon exemple : Boutons d’étiquetage

L’élément <button> crée un bouton cliquable. Dans le contenu de l’élément bouton, vous pouvez mettre du texte et des balises comme <i>, <b>, <strong>, <br>, <img>, etc.

Vous pouvez également utiliser l'élément <input> pour créer des boutons, auquel cas l'étiquette est définie dans l'attribut value de l'élément.

Si vous utilisez <input type="image">, l’étiquette se trouve dans l’attribut alt.

HTML

Début du code

<button type="submit">Submit</button> 
<button type="button">Cancel</button> 
<button>Activate</button>

<input type="submit" value="Soumettre"> 
<input type="button" value="Cancel">
<input type="image" src="searchbutton.jpg" alt="Recherche">

Fin du code

Bon exemple : Bouton d’étiquetage des images utilisant l’attribut aria-label

Dans cet exemple, un attribut aria-label nomme le bouton, au lieu de l’attribut alt de l’élément enfant <img>. L’attribut alt est réglé à nul (vide): alt="".

L'exemple commence

L'exemple finit

HTML

Début du code

<button aria-label="Suivant">
   <img src="images/next.png" alt="">
</button>

Fin du code