Lighthouse accessibility audit issues

Contribute UX

AI-generated summary

Lighthouse Accessibility Audit Issues

A discussion on accessibility issues found using the Google Lighthouse audit tool. awesomerobot is willing to fix the issues, and Phillip_Rooney confirms using the Lighthouse audit.

Three main issues were identified:

  1. List items not contained within <ul> or <ol> parent elements: This issue is disputed, as awesomerobot claims the list items are definitely contained.
  2. Invalid ARIA attribute values: Specifically, the aria-haspopup attribute was not set to a valid value. awesomerobot fixed this by setting aria-haspopup to "true" as a string.
  3. Links without discernible names: Two occurrences were found:
    • An a.tabLoc element with no dimensions, which was fixed by making it conditional to keyboard navigation and adding aria-hidden: true.
    • An envelope icon linking to the PM inbox was fixed by making the link conditional to PMs and adding a title attribute and aria-label.
1

I’m totally willing to fix any accessibility issues that come up, are you discovering these through the Lighthouse audit built-in to Chrome, something else?

7 Likes
$primary-medium SCSS variable problems
2

Awesome!

Yes I am using the google lighthouse audit.

1 Like
3

Split this into its own topic to dig into the issues a bit more. Starting with the…

Topic list

Outside of contrast, which for now is fixable with CSS… there are 2 issues:

  1. This first one with the list items seems to be a bug with the auditor, or maybe a quirk with how the auditor is seeing how our page renders? These list items are definitely contained.
    18%20PM
    18%20PM1492×610 52 KB

    :male_detective: :mag_right:

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

  1. The second issue is [aria-*] attributes do not have valid values. This is specifically calling out our category and tag dropdowns… the issue here seems to be aria-haspopup. According to the example here Navigation Menu Button Example | APG | WAI | W3C we should have aria-haspopup="true" instead of just aria-haspopup

    Looks like we weren’t passing true as a string, I fixed that here: True should be a string to display properly in aria-haspopup · discourse/discourse@b848bd4 · GitHub

7 Likes
4

Topics

One issue (aside from contrast and the previously mentioned li non-issue)

Links do not have a discernible name

Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users. Learn more.

Two occurrences:

  1. Each post gets an a.tabLoc element with no dimensions. These appear to be for navigating posts with the keyboard? Hidden with aria-hidden: true because they’re useless to screen readers. Hide empty anchor tag from screen readers · discourse/discourse@bdaf07a · GitHub

  2. The envelope icon used to denote when a topic is a personal message also links to your PM inbox, and we were loading that link for all topics… even if they aren’t PMs. I made that link conditional to PMs, and also added a title attribute and aria-label. Don't load PM icon in title unless topic is a PM · discourse/discourse@1983f0d · GitHub and UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub

6 Likes