Problemi di audit sull'accessibilità di Lighthouse

Contribuisci UX
1

Sono assolutamente disposto a risolvere eventuali problemi di accessibilità che dovessero emergere. Li stai scoprendo tramite l’audit Lighthouse integrato in Chrome o con qualcos’altro?

7 Mi Piace
$primary-medium SCSS variable problems
2

Fantastico!

Sì, sto utilizzando l’audit di Google Lighthouse.

1 Mi Piace
3

Dividi questo in un argomento separato per approfondire un po’ di più i problemi. Iniziamo con…

Elenco degli argomenti

Oltre al contrasto, che per ora è risolvibile con il CSS… ci sono 2 problemi:

  1. Il primo, relativo agli elementi dell’elenco, sembra essere un bug dell’auditor, o forse una stranezza nel modo in cui l’auditor interpreta il rendering della nostra pagina? Questi elementi dell’elenco sono sicuramente contenuti.
    18%20PM
    18%20PM1492×610 52 KB

    :male_detective: :mag_right:

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

  1. Il secondo problema è [aria-*] attributes do not have valid values. Questo segnala specificamente i nostri menu a tendina per categorie e tag… il problema qui sembra essere aria-haspopup. Secondo l’esempio qui Navigation Menu Button Example | APG | WAI | W3C dovremmo avere aria-haspopup="true" invece di semplicemente aria-haspopup

    Sembra che non stessimo passando true come stringa, l’ho corretto qui: True should be a string to display properly in aria-haspopup · discourse/discourse@b848bd4 · GitHub

7 Mi Piace
4

Argomenti

Un problema (a parte il contrasto e il precedente problema non rilevato su li)

I link non hanno un nome distinguibile

Il testo del link (e il testo alternativo per le immagini, quando utilizzate come link) che è distinguibile, unico e selezionabile migliora l’esperienza di navigazione per gli utenti degli screen reader. Scopri di più.

Due occorrenze:

  1. Ogni post riceve un elemento a.tabLoc senza dimensioni. Questi sembrano essere utilizzati per navigare tra i post con la tastiera? Sono nascosti con aria-hidden: true perché inutili per gli screen reader. Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub

  2. L’icona della busta utilizzata per indicare che un argomento è un messaggio privato collega anche alla tua casella di posta privata, e stavamo caricando quel link per tutti gli argomenti… anche se non erano messaggi privati. Ho reso quel link condizionale ai messaggi privati e ho aggiunto anche un attributo title e un aria-label. Don't load PM icon in title unless topic is a PM · discourse/discourse@1983f0d · GitHub e UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub

6 Mi Piace