Lighthouse-Zugänglichkeits-Audit-Probleme

Beitragen UX
1

Ich bin absolut bereit, alle auftretenden Zugänglichkeitsprobleme zu beheben. Entdeckst du diese durch den in Chrome integrierten Lighthouse-Audit oder etwas anderes?

7 „Gefällt mir“
$primary-medium SCSS variable problems
2

Toll!

Ja, ich verwende den Google Lighthouse-Audit.

1 „Gefällt mir“
3

Trenne das in ein eigenes Thema auf, um die Probleme etwas genauer zu untersuchen. Beginnen wir mit dem…

Themenliste

Abgesehen vom Kontrast, der vorerst mit CSS behoben werden kann, gibt es zwei Probleme:

  1. Das erste Problem mit den Listenelementen scheint ein Fehler im Auditor zu sein, oder vielleicht eine Besonderheit darin, wie der Auditor das Rendern unserer Seite interpretiert? Diese Listenelemente sind definitiv enthalten.
    18%20PM
    18%20PM1492×610 52 KB

    :male_detective: :mag_right:

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

  1. Das zweite Problem lautet: „[aria-*]-Attribute haben keine gültigen Werte“. Dies bezieht sich speziell auf unsere Dropdown-Menüs für Kategorien und Tags. Das Problem scheint bei aria-haspopup zu liegen. Laut dem Beispiel hier Navigation Menu Button Example | APG | WAI | W3C sollten wir aria-haspopup="true" verwenden, anstatt nur aria-haspopup.

    Es sieht so aus, als hätten wir true nicht als String übergeben. Ich habe das hier behoben: True should be a string to display properly in aria-haspopup · discourse/discourse@b848bd4 · GitHub

7 „Gefällt mir“
4

Themen

Ein Problem (neben dem Kontrast und dem zuvor erwähnten li-Nicht-Problem)

Links haben keinen erkennbaren Namen

Linktext (und Alternativtext für Bilder, wenn sie als Links verwendet werden), der erkennbar, eindeutig und fokussierbar ist, verbessert die Navigationserfahrung für Nutzer von Bildschirmlesegeräten. Mehr erfahren.

Zwei Vorkommnisse:

  1. Jeder Beitrag erhält ein a.tabLoc-Element ohne Abmessungen. Diese scheinen dazu zu dienen, Beiträge mit der Tastatur zu navigieren? Sie sind mit aria-hidden: true ausgeblendet, da sie für Bildschirmlesegeräte nutzlos sind. Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub

  2. Das Umschlagsymbol, das anzeigt, ob ein Thema eine private Nachricht ist, verlinkt ebenfalls auf Ihren PM-Posteingang, und wir haben diesen Link für alle Themen geladen … selbst wenn es sich nicht um PMs handelt. Ich habe diesen Link auf PMs beschränkt und zudem ein title-Attribut sowie ein aria-label hinzugefügt. Don't load PM icon in title unless topic is a PM · discourse/discourse@1983f0d · GitHub und UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub

6 „Gefällt mir“