# Lighthouse accessibility audit issues

**URL:** https://meta.discourse.org/t/lighthouse-accessibility-audit-issues/122612
**Category:** UX
**Tags:** accessibility
**Created:** [July 9, 2019, 11:46pm UTC](https://meta.discourse.org/t/lighthouse-accessibility-audit-issues/122612 "2019-07-09T23:46:40Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 9, 2019, 11:46pm UTC](https://meta.discourse.org/t/lighthouse-accessibility-audit-issues/122612/1 "2019-07-09T23:46:40Z")

</div>

> [@$primary-medium SCSS variable problems](https://meta.discourse.org/t/primary-medium-scss-variable-problems/122390/3):
>
> The site however is not just failing on contrast e.g. other often failing elements are - ( List items ( `<li>` ) are not contained within `<ul>` or `<ol>` parent elements.)

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?

---

<div class="post-metadata">

### Author: ![Phillip\_Rooney](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phillip_rooney/32/141202_2.png) [@Phillip\_Rooney](https://meta.discourse.org/u/Phillip_Rooney)
#### Post date: [July 9, 2019, 11:53pm UTC](https://meta.discourse.org/t/lighthouse-accessibility-audit-issues/122612/2 "2019-07-09T23:53:19Z")

</div>

Awesome!

Yes I am using the google lighthouse audit.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 11, 2019, 2:10am UTC](https://meta.discourse.org/t/lighthouse-accessibility-audit-issues/122612/3 "2019-07-11T02:10:06Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/3/d/3dad5258361c6a7b66512bf5c480b20ec3cd8ab5.png)  
🕵️‍♂️ 🔎

 ![55%20PM](https://global.discourse-cdn.com/meta/original/3X/a/b/aba643946bfcb8d19ff4215cfd499bf90f7b60c9.png)

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](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html) we should have `aria-haspopup="true"` instead of just `aria-haspopup`

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 11, 2019, 3:15am UTC](https://meta.discourse.org/t/lighthouse-accessibility-audit-issues/122612/4 "2019-07-11T03:15:23Z")

</div>

## 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](https://dequeuniversity.com/rules/axe/3.1/link-name?application=lighthouse).

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](https://github.com/discourse/discourse/commit/bdaf07adcf807bfe1a20f0d427e94a66ac712433)

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](https://github.com/discourse/discourse/commit/1983f0d06e4163841f889962dfc2be04f0047b26) and [UX: Add title attribute and aria-label to PM icon link · discourse/discourse@aa71818 · GitHub](https://github.com/discourse/discourse/commit/aa7181820c7be6989bdfe66f71f99b45774e8b7e)