Feature #12139
closedAddressing Redundant Links Accessibility Issue
0%
Description
Hi All,
Following up on our accessibility conversation from the recent team meeting...
One of the most common issues on the Commons is the prevalence of redundant links throughout many of the directory pages. Redundant links are an issue because often screen readers navigate by jumping through the links on a page.
Common places where redundant links appear:
- On the Home page in the "Group" and "People" rolls the image and title text link to same place
- In My commons, and sites and group directory pages, avatar and Title text link to same place
Boone suggested that various types of redundant link pairs might require different solutions and I think i recall and aria roll being mentioned. I think starting with these pages would be great for now but I can also provide additional information about where this might be happening across the Commons.
Updated by Boone Gorges over 4 years ago
- Assignee set to Boone Gorges
- Target version set to 1.16.2
Thanks, Laurie. I agree it makes sense to start here.
W3C recommends combining the elements into a single link: https://www.w3.org/TR/WCAG20-TECHS/H2.html But this might be hard given our reliance on the way that BP and our theme build the directory markup. So role="presentation" and/or aria-hidden="true" might be our next-best option. See example 2 at https://www.w3.org/WAI/tutorials/images/informative/.
I'd like to consider phasing in some of these changes in minor releases.
Updated by Laurie Hurson over 4 years ago
Hi Boone,
Just to clarify my understanding, the alt text for the images would stand in for the explanatory text? Would we then have to ask folks to customize the alt text on their profile, group, and site images? Or maybe this means that the image text is hidden and supplemented by the link text? I think the second option might make more sense but am interested to better understand how this works.
Either way, I defer to your opinion on this so the second option sounds good to me.
Updated by Boone Gorges over 4 years ago
Avatar markup on the Commons already contains alt text. Example:
<img src="//www.gravatar.com/avatar/96e0d06232a4714cf4ba319ed4dc0236?s=50&r=g&d=retro" data-src="//www.gravatar.com/avatar/96e0d06232a4714cf4ba319ed4dc0236?s=50&r=g&d=retro" class="avatar group-1779-avatar avatar-50 photo" alt="Group logo of Data Visualization" width="50" height="50">
This is generated automatically. We want and need users to provide their own alt text for images that they insert into post content (see #8900) but we don't need them to do it for avatars.
The problem in this case is not the absence of alt text, it's the fact that there are two links pointing to the same place, and one of the links contains no non-presentational content - it's just an avatar, which is useless to a screen reader. So combining the two into a single link, or hiding the avatar from screen readers, is preferable.
Updated by Laurie Hurson over 4 years ago
Thanks Boone. This makes more sense now, sorry for the need for additional explanation. Collapsing these links into one sounds like a good solution.
Updated by Boone Gorges over 4 years ago
Like I said during our recent meeting, I'm very glad to expand the number of people on the team who have some specific knowledge of a11y issues and their technical solutions, so I'm happy to provide more info wherever needed.
Updated by Boone Gorges over 4 years ago
- Target version changed from 1.16.2 to 1.16.3
Updated by Boone Gorges over 4 years ago
- Target version changed from 1.16.3 to 1.16.4
Updated by Boone Gorges about 4 years ago
- Target version changed from 1.16.4 to 1.16.5
Updated by Boone Gorges about 4 years ago
- Status changed from New to Reporter Feedback
I've spent some time looking into this issue. A couple of things I looked at:
1. The number 1 recommendation is to combine the two linked items (the text and the image) into a single anchor element. However, the structure of our markup makes this very difficult.
2. I thought maybe we could hide the image from screen readers using aria-hidden, but WAVE suggests that this doesn't get around the redundant link issue. I'm unsure whether this is a bug in WAVE, but in any case, it's not ideal.
3. It's possible to remove the link from the image, but to use JS to allow the image to be clickable (and styled) like a link anyway. But this feels like a lot of work.
So my suggestion is that we simply remove the link from the avatars in these cases. The title link would be the sole way of navigating to the single item. This solution is semantically correct, and technically simple. What do others think?
Updated by Laurie Hurson about 4 years ago
Thanks for looking into this Boone.
Given the lift required for the other fixes, removing the links from the avatar images sounds like a good and simple solution to me. I don't think this will create much confusion for current users.
Updated by Boone Gorges about 4 years ago
Thanks for the feedback, Laurie. I've gone ahead and made the change, and pulled it to the dev environment in case anyone wants to test it a bit before next week's release.
Updated by Boone Gorges about 4 years ago
- Status changed from Reporter Feedback to Resolved
We're going with it :-D