Project

General

Profile

Feature #12139

Addressing Redundant Links Accessibility Issue

Added by Laurie Hurson about 2 years ago. Updated almost 2 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
-
Target version:
Start date:
2019-11-25
Due date:
% Done:

0%

Estimated time:

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.

History

#1 Updated by Boone Gorges about 2 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.

#2 Updated by Laurie Hurson about 2 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.

#3 Updated by Boone Gorges about 2 years ago

Avatar markup on the Commons already contains alt text. Example:

<img src="//www.gravatar.com/avatar/96e0d06232a4714cf4ba319ed4dc0236?s=50&amp;r=g&amp;d=retro" data-src="//www.gravatar.com/avatar/96e0d06232a4714cf4ba319ed4dc0236?s=50&amp;r=g&amp;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.

#4 Updated by Laurie Hurson about 2 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.

#5 Updated by Boone Gorges about 2 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.

#6 Updated by Boone Gorges almost 2 years ago

  • Target version changed from 1.16.2 to 1.16.3

#7 Updated by Boone Gorges almost 2 years ago

  • Target version changed from 1.16.3 to 1.16.4

#8 Updated by Boone Gorges almost 2 years ago

  • Target version changed from 1.16.4 to 1.16.5

#9 Updated by Boone Gorges almost 2 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?

#10 Updated by Laurie Hurson almost 2 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.

#11 Updated by Boone Gorges almost 2 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.

#12 Updated by Boone Gorges almost 2 years ago

  • Status changed from Reporter Feedback to Resolved

We're going with it :-D

#13 Updated by Laurie Hurson almost 2 years ago

Thanks Boone!!

Also available in: Atom PDF