Problèmes d'audit d'accessibilité Lighthouse

Contribuer UX
1

Je suis tout à fait disposé à corriger tout problème d’accessibilité qui se présente. Les découvrez-vous grâce à l’audit Lighthouse intégré à Chrome ou à autre chose ?

7 « J'aime »
$primary-medium SCSS variable problems
2

Super !

Oui, j’utilise l’audit Google Lighthouse.

1 « J'aime »
3

Séparez cela dans un nouveau sujet pour explorer les problèmes un peu plus en détail. En commençant par le…

Liste des sujets

En dehors du contraste, qui pour l’instant peut être corrigé avec du CSS… il y a 2 problèmes :

  1. Le premier, concernant les éléments de liste, semble être un bug de l’auditeur, ou peut-être une particularité liée à la façon dont l’auditeur interprète le rendu de notre page ? Ces éléments de liste sont clairement contenus.
    18%20PM
    18%20PM1492×610 52 KB

    :male_detective: :mag_right:

55%20PM
55%20PM1172×166 29.7 KB

  1. Le deuxième problème est [aria-*] attributes do not have valid values. Cela concerne spécifiquement nos menus déroulants de catégories et d’étiquettes… le problème ici semble être aria-haspopup. Selon l’exemple ici Navigation Menu Button Example | APG | WAI | W3C, nous devrions avoir aria-haspopup="true" au lieu de simplement aria-haspopup

    Il semble que nous n’ayions pas passé true sous forme de chaîne. Je l’ai corrigé ici : True should be a string to display properly in aria-haspopup · discourse/discourse@b848bd4 · GitHub

7 « J'aime »
4

Sujets

Un problème (en dehors du contraste et du non-problème li mentionné précédemment)

Les liens n'ont pas de nom identifiable

Le texte des liens (et le texte alternatif des images, lorsqu’elles sont utilisées comme liens) qui est identifiable, unique et focalisable améliore l’expérience de navigation pour les utilisateurs de lecteurs d’écran. En savoir plus.

Deux occurrences :

  1. Chaque publication reçoit un élément a.tabLoc sans dimensions. Ceux-ci semblent servir à naviguer entre les publications au clavier ? Masqués avec aria-hidden: true car inutiles pour les lecteurs d’écran. Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub

  2. L’icône d’enveloppe utilisée pour indiquer qu’un sujet est un message privé lie également vers votre boîte de réception de messages privés, et nous chargions ce lien pour tous les sujets… même s’ils ne sont pas des messages privés. J’ai rendu ce lien conditionnel aux messages privés et ajouté un attribut title et un aria-label. Don't load PM icon in title unless topic is a PM · discourse/discourse@1983f0d · GitHub et UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub

6 « J'aime »