Keros Accessibility pass failures

Support
1

Hello Discourse team,

We recently ran an automated Accessibility pass using Keros on our site, and had quite a few fail instances. A lot of the failures related to things like Landmarks not having unique roles (aria-label) or ARIA attributes not having valid values.
I was just wondering how I should go about reporting those kinds of issues here? Should I list a few examples for each section (like Landmarks, Headings, Native Widgets, etc.)? Any feedback would be greatly appreciated. Thanks!

1 Like
2

Specific actionable feedback is the way to go here.

Eg:

Suggestion : add aria-label with XYZ to element ABC
Reason: Currently it is very hard to tell EFG cause of missing decorations etc.

And so on.

Start with the 3 most urgent changes.

5 Likes
3

Hello @sam

Thanks for the help! In that case, I’ll start with these items:

  1. Suggestion: Add heading name to user Profile page.
    Reason: Without a heading label, users with disabilities might not know what content is on the page, or they may have a hard time finding the information they need.

  2. Suggestion: Add “avatar/icon” or “profile” to user icon titles (for example, when using a screenreader and hovering over a user’s Profile pic, it simply says their Gamertag).
    Reason: It’s immediately decipherable from context that user icons will link to their Profile page when selected.

  3. Suggestion: Add titles or labels to social media Footer links.
    Reason: When using a screenreader and hovering over the social media links in the footer (YouTube, Facebook, Twitter, Instagram), it only says “Link” and is not specific enough.

Please review these items and let me know if you need more info or clarification.
Thanks!

3 Likes
4

These are unclear to me.

  1. Can you specify what page you are talking about, and what HTML element on the page, maybe with some source code in your post?

  2. Which URL are you referring to here? Every time an avatar appears on the page, or just the user profile page?

  3. We have no footer at meta.discourse.org are you referring to some other website?

1 Like
5

Hello Jeff,

Sorry about that, reporting issues here is new to me, and it’s kind of difficult because we aren’t allowed to share much information about the site since it isn’t live yet. But let me try to elaborate:

  1. The page URLs that are listed are for the Profile page (Summary, Activity, Bookmarks, etc.). Here is the Code Snippet along with the fix suggestions:
    empty-heading

  2. Correct, every time an avatar is on a page. It’s not clear that an avatar is a link to a user’s profile page. <img alt="" width="32" height="32" src="[avatar image]" title="[Gamertag]" class="avatar">

  3. Please ignore the footer issue, it’s custom and can be fixed by us. Apologies for that.
    But I’d like to replace that with another issue, which is missing alt text from user Avatar images. It’s just simply blank:
    <img alt="" width="32" height="32" src="[avatar image]" title="[Gamertag]" class="avatar">

2 Likes
6

If you are using automated scanners, be warned, these tools are particularly unreliable when used against JavaScript apps like Discourse – they expect “old school” websites where everything is served in HTML in the server HTTP request. Discourse serves JavaScript which programmatically builds each page on demand as the user clicks / taps on things.

2 Likes