Étiquette non associée à l'entrée
L'utilisation du phare intégré Chrome Lighthouse pour exécuter l'audit d'accessibilité sur un site WP a montré que le champ d'inscription n'était pas valide en raison de l'absence d'étiquette associée. J'ai rencontré avant et je ne comprends pas pourquoi il ne pense pas qu'il est associé. Je peux le faire passer en ajoutant un aria-label tag au input directement mais je ne devrais pas avoir à le faire.
Voici un extrait de code créé à partir de Subscribe2
<label for="s2email">Your email:</label>
<br>
<input type="text" name="email" id="s2email" value="Enter email address..." size="20" onfocus="if (this.value === 'Enter email address...') {this.value = '';}" onblur="if (this.value === '') {this.value = 'Enter email address...';}">
Peut être trouvé ici: https://blog.collaborative.org/
Lorsque vous examinez l'exemple de code isolément, il semble correct: il a un label explicitement associé à l'élément input à l'aide des attributs for et id .
Cependant, lorsque vous inspectez le site, il semble différent: en raison de la règle de style .s2_form_widget label { display: none; } l'étiquette est invisible. (Vous pouvez le voir lorsque vous utilisez l'inspecteur dans Firefox, passez à l'étiquette dans l'arborescence DOM et vérifiez les styles associés.)
Notez que display: none ne masque pas seulement visuellement l'étiquette mais aussi pour les lecteurs d'écran. Par conséquent, l'élément d'entrée n'a pas d'étiquette du point de vue d'un lecteur d'écran ou d'une autre technologie d'assistance et ne satisfait pas à l'exigence selon laquelle les contrôles de formulaire nécessitent des étiquettes explicites. (Vous pouvez également essayer de masquer l'étiquette hors écran avec une marge négative.)