Notes
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Texte
L’élément est de type input, button, image-button ou landmark , mais n’a pas de nom accessible.
Type
Erreur
Description
Cette erreur s’applique à :
- Champs d’entrée de formulaire :
- Balises HTML: input[type= « text|password|checkbox|radio|file|email|tel|color|datetime|datetime|time|week|month|number|range|search|url"], select, datalist et textarea.
- Rôles WAI-ARIA : case à cocher, zone de liste modifiable, zone de liste, radiogroupe, radio, zone de texte, arborescence, curseur et bouton tournant.
- Images/boutons d’image/ boutons
- Balises HTML : img, input[type="image|button"] et button.
- Rôles WAI-ARIA : img et bouton.
- Points de repère
- Rôles WAI-ARIA : région, bannière, complémentaire, contentinfo, formulaire, main, navigation et recherche.
Notes
AccChecker affiche cette erreur même pour les éléments pour lesquels le nom accessible est défini par défaut en fonction du contenu HTML interne (voir l’élément banner dans l’exemple ci-dessus). Dans ce cas, vous pouvez supprimer ces erreurs.
Tous les éléments d’interface utilisateur sémantiquement importants, tels que les champs de formulaire (par exemple, entrée, sélection, zone de texte), les images, les boutons et les points de repère (balises représentant des régions logiques) doivent avoir le nom accessible pour permettre aux lecteurs d’écran de les annoncer correctement.
Pour corriger cette erreur, définissez le nom accessible de l’une des manières suivantes (répertoriées dans l’ordre de préférence).
- Champs de formulaire : utilisez la balise d’étiquette et définissez pour l’attribut sur la valeur id du champ cible.
- Bouton Image/image : définissez l’attribut alt .
- Boutons : définissez le bouton légende texte.
- Pour n’importe quel élément :
- attribut aria-labelledby : définissez sur la valeur id de l’élément contenant la chaîne de nom accessible.
- attribut aria-label : défini sur la chaîne de nom accessible.
- attribut title : définissez sur la chaîne de nom accessible (créez également une info-bulle).
Exemple
<!-- For landmark tags, set the accessible name by using the aria-labelledby
attribute to reference the visible headers. -->
<h1 id="formHeader">Application Form</h1>
<form aria-labelledby="formHeader">
<!-- For input fields, use the LABEL tag with the for attribute. -->
<label for="fullName">Full Name</label>
<input id="fullName" type="text" />
<!-- If there is no visible text that can be referenced, set the accessible
name by using aria-label or title attributes. -->
<input type="file" aria-label="Your photo"/>
<!-- For images, use the alt attribute. -->
<img src="…" alt="Uploaded photo" />
<!-- For buttons, caption text is also used as the accessible name. -->
<button onclick="processForm()">Send</button>
<!-- For image buttons, use the alt attribute to define the accessible name. -->
<input type="image" src="images/moreinfo.png" alt="Show more info"/>
<!-- For elements with inner text this error can be suppressed because the
accessible name is set by default. -->
<div role="banner">Accessible name set by default</div>
</form >