Puis-je / dois-je étiqueter une plage d'informations pour les lecteurs d'écran?
J'ai une plage d'informations, en particulier une plage pleine d'étoiles qui représentent une note (icônes d'étoiles qui peuvent être remplies ou non). En l'état, il ne devrait pas du tout être visible pour un lecteur d'écran, car il n'y a pas de texte à lire, mais les informations sont importantes pour un utilisateur. Je pense mettre une étiquette qui n'est visible que par les lecteurs d'écran. De les documents MDN , cela semble être correct, car ils le disent
représente une légende pour un élément dans une interface utilisateur
et il y a un langage qui dit qu'il "peut" être associé à un contrôle, mais aucun ne doit l'être. Cela a du sens, car vous pouvez associer une étiquette à un (comme @Jukka le note, fieldset ainsi qu'à un input, mais je ne sais pas si cela s'étend à l'étiquetage d'une plage.label n'est pas pas approprié pour fieldset, je pensais à legend)
L'étiquetage d'une plage avec des informations équivalentes est-il suffisant pour qu'un lecteur d'écran puisse le voir et l'utiliser? Est-ce une mauvaise pratique?
Non. L'élément label est destiné à l'étiquetage des contrôles (champs de formulaire), et pour eux, il est pris en charge dans les agents utilisateurs et dans logiciel d'assistance. L'utiliser pour étiqueter autre chose est illogique et n'a probablement aucun but utile: soit il est ignoré, soit il est implémenté d'une manière qui fait penser à l'utilisateur qu'il est associé à un contrôle.
Formellement, le CR HTML5 proche de la norme de facto dit que l'élément label doit être associé à un "élément étiquetable"; ceci est défini de telle sorte que par ex. span n'est pas étiquetable (et ni fieldset: un élément label doit étiqueter un contrôle ) , pas un ensemble de contrôles).
Le site MDN ne fait pas autorité. Bien que généralement très utile, il est trompeur dans ce numéro. L'élément label n'est pas destiné à étiqueter les "éléments d'interface utilisateur" en général.
La façon la plus accessible de présenter des notes avec des étoiles est d'utiliser une image distincte pour chaque nombre d'étoiles et un attribut alt qui exprime le nombre en mots, par exemple <img alt="Three stars out of five" src=stars3.png>. Il existe différentes autres approches. Si vous utilisez un élément span que vous formatez pour ressembler à un certain nombre d'étoiles, alors la technique ne fournit probablement pas une bonne accessibilité. Si vous devez travailler dans de telles conditions, utilisez un attribut title sur cet élément, exprimant verbalement la note. L'attribut sera lu par certains logiciels sous certaines conditions.
ne pas être en désaccord avec l'opinion de @ jukka sur l'utilisation de img / éléments, mais voici une autre version utilisant input /s http://jsfiddle.net/leaverou/CGP87/light/