web-dev-qa-db-fra.com

Meilleure pratique pour utiliser aria-label en tant que sélecteur de style

Je suis en train de styler une table qui contient des cellules avec des coches (non interactives). Les icônes de coche sont ajoutées via CSS. Comme il ne contient aucun contenu accessible, j'ai ajouté un aria-label. Maintenant, je me demande si c'est une bonne idée d'utiliser cet attribut comme sélecteur CSS pour ajouter ces icônes avec une coche comme celle-ci:

td[aria-label="yes"] {
  &:after {
    content: '\f00c';
    font-family: $font-family-icons;
  }
}

J'ai appris que l'utilisation d'attributs ARIA en tant que sélecteurs est généralement une bonne pratique, du moins pour les attributs liés à l'état tels que aria-hidden, aria-expanded, etc. Dans ce cas, il était logique que le style td soit associé à l'étiquette correspondante. Mais bien sûr, si ces étiquettes changent à un moment donné, je devrai également adapter le CSS.

Connaissez-vous d'autres inconvénients en dehors de cela? Ou avez-vous des idées sur la façon de résoudre cela plus élégamment?

csscss-selectorsaccessibilitywai-aria
4
josi

Pour représenter des états de contrôle qui ne sont pas véhiculés de manière native en HTML, tels que développés (par exemple), puis vous appuyer sur les attributs ARIA en tant que sélecteurs de style peut être un bon choix.

Dans ce cas, vous utilisez CSS pour ajouter du contenu à une page basée sur ARIA. Je ne pense pas que vous ayez besoin de vous. Premièrement, la prise en charge de aria-label (sur <td>s ainsi que d’autres éléments) peut être fragile sur les anciens combos navigateur/écran , et deuxièmement, le support du contenu généré par CSS par les anciens combos navigateur/écran peut être plus fragile. Je ne connais rien à vos utilisateurs, cependant, pour savoir si cela compte.

Cela suppose également que les charges CSS soient sans problème (connexions réseau, etc.).

Cela signifie que certains utilisateurs peuvent ne jamais entendre ni voir la valeur dans la cellule.

J'essaie de m'assurer que le contenu brut est disponible, que le CSS soit chargé ou non de style, et j'essaie également de limiter ma confiance en ARIA.

Cela dit, le support de aria-hidden est généralement historiquement supérieur aux deux problèmes que je soulève ci-dessus.

Laisse-moi te lancer une autre idée. Ce n'est pas nécessairement meilleur, mais je pense qu'il est plus robuste lorsque l'on considère les configurations d'utilisateurs inconnus AT et les problèmes de réseau potentiels.

J'ai mis le texte et la coche dans le <td>. Si le CSS ne se charge jamais (ou si les utilisateurs utilisent un très vieux navigateur), ce n'est pas grave. Le pire qui puisse arriver est qu'un utilisateur voit/entende "Oui, chèque".

Ensuite, le aria-hidden s'assure que la coche n'est pas annoncée aux lecteurs d'écran. Le CSS masque le texte des utilisateurs voyants. Et je pense que vous avez l'effet que vous voulez.

<td>
 <span class="visually-hidden">Yes</span>
 <span aria-hidden="true">&#10004;</span>
</td>

.visually-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding:0 !important;
  border:0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}
2
aardrian

Connaissez-vous d'autres inconvénients en dehors de cela? 

Si vous utilisez l'attribut aria-label comme sélecteur de style, il n'y a techniquement aucun problème.

  • En ce qui concerne l'utilisation de aria-label

Cela ne suffit pas en soi pour constituer un texte de remplacement valable pour tous les types de problèmes d'accessibilité.

Très peu de gens utilisent un lecteur d'écran. Si aria-label peut être une aide pour eux (en fonction du support du lecteur d'écran, voir la réponse @aardrian), il ne sert à rien pour une grande partie de la population.

Un code UTF-8 spécial représentant une coche n'est rien d'autre visuellement qu'une image, et les utilisateurs peuvent s'attendre, par exemple, à disposer d'une info-bulle. D'ailleurs, l'attribut title est recommandé, utilisé conjointement avec aria-label pour une meilleure prise en charge du navigateur et du lecteur d'écran.

Une personne qui utilise une loupe d’écran ou un trouble cognitif peut alors accéder au texte alternatif de la coche sans devoir faire défiler jusqu’à l’en-tête du tableau de la colonne.

Le problème restera important pour une personne ayant une déficience motrice, car il est toujours très difficile de faire défiler pour voir le titre ou d’utiliser la souris pour voir ce que cette coche signifie.

TLDR: ARIA ne donne pas l'accessibilité universelle à tous les types de handicap

1
Adam