42

The user card currently has "user avatar" as the alt text for the profile picture. This is problematic for two reasons:

  1. It's on the image, not the link, so it ends up as both the text for the graphic and the link, resulting in it being read twice. On Android using Talkback, I hear "user avatar, link, double-tap to activate", then "user avatar, graphic."

    Firefox developer tools showing both "link" and the child "graphic" with a text of "user avatar"

  2. The avatar is a purely decorative image, so ideally the alt text should be blank—that is, the empty string ("")—and it wouldn't be read out at all to reduce noise for screen-reader users. The name is already present and is read out after moving on from the avatar. The problem with doing this is that there are currently two links: one on the name, one on the avatar. I'm not an expert on web accessibility, so I'm not entirely sure how to make the avatar be treated as the same element as the link.

At least the first problem (the double read-out) should be corrected—that should be relatively straightforward. I'm uncertain how easy it would be to fix the second.

Disclaimer: I'm a sighted user who is not a regular user of screen readers. Please correct me if I'm wrong about any of this.

2
  • 14
    Having two adjacent links to the same thing is also annoying to a sighted person who uses tab to navigate. Both items should be wrapped in the same link.
    – Laurel
    Jun 9, 2022 at 15:10
  • 3
    Letting you know this was tagged as under review just now. (I'd much prefer that mod-only tag edits send notifications - normally, tag-only edits don't.) Nov 21 at 21:03

0

You must log in to answer this question.

Browse other questions tagged .