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?
Yes I am using the google lighthouse audit.
Split this into its own topic to dig into the issues a bit more. Starting with the…
Outside of contrast, which for now is fixable with CSS… there are 2 issues:
- 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.
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 | WAI-ARIA Authoring Practices 1.1 we should have
aria-haspopup="true"instead of just
Looks like we weren’t passing true as a string, I fixed that here: https://github.com/discourse/discourse/commit/b848bd4ddce37812d2ffc22f365188d9aa23637c
One issue (aside from contrast and the previously mentioned
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.
Each post gets an
a.tabLocelement with no dimensions. These appear to be for navigating posts with the keyboard? Hidden with
aria-hidden: truebecause they’re useless to screen readers. https://github.com/discourse/discourse/commit/bdaf07adcf807bfe1a20f0d427e94a66ac712433
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. https://github.com/discourse/discourse/commit/1983f0d06e4163841f889962dfc2be04f0047b26 and https://github.com/discourse/discourse/commit/aa7181820c7be6989bdfe66f71f99b45774e8b7e