Skip to:

Opened 17 months ago

Closed 17 months ago

Last modified 3 months ago

#7747 closed defect (bug) (fixed)

BP Nouveau: Member and Group Cover Image links are not accessible to assistive techonologies.

Reported by: mercime Owned by: mercime
Milestone: 3.0 Priority: low
Severity: normal Version:
Component: Templates Keywords: has-patch

Description (last modified by mercime)

Every link must have an accessible name or discernable text for assistive technologies. "If a link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users."

Our cover image links have no link content:
Groups: <a id="header-cover-image" href="<?php echo esc_url( bp_get_group_permalink() ); ?>"></a>
Members: <a id="header-cover-image" href="<?php bp_displayed_user_link(); ?>"></a>

Possible fixes: add accessible text to the link or remove the link and replace with a div. Other possibilities welcome.

Ref: WCAG 2.0 > Principle 2: Operable - User interface components and navigation must be operable. > 2.4 Provide ways to help users navigate, find content, and determine where they are. > 2.4.4 Link Purpose (In Context) which is consistent in the new WCAG 2.1

Attachments (1)

7747.patch (2.5 KB) - added by mercime 17 months ago.

Download all attachments as: .zip

Change History (13)

#1 @mercime
17 months ago

  • Description modified (diff)

#2 @DJPaul
17 months ago

  • Milestone changed from Awaiting Review to 3.0

#3 @hnla
17 months ago

@mercime which link, where?

#4 @mercime
17 months ago

@hnla Per my post above, our cover image links have no link content::

Groups: <a id="header-cover-image" href="<?php echo esc_url( bp_get_group_permalink() ); ?>"></a>
Members: <a id="header-cover-image" href="<?php bp_displayed_user_link(); ?>"></a>

#5 @hnla
17 months ago

Yep I was just asking for a file reference really, wasn't clear where the link was and where it is wasn't an intuitive place to look :)

Really don't know why there needs to be an anchor/href there but the same exists for Legacy too.

I'll have a quick play around removing, try and see what if anything breaks, but this likely needs a deeper scan of the implementation of these cover images.

#6 @hnla
17 months ago

Well it doesn't seem as though the href is actually required for anything...obvious; I can remove and re-upload a new image ok so it feels as though we can probably change the element to a span or div as long as we retain the id token and delete the href attr.

I also note we link the group avatar on the group page not sure why we need to do this, a link for no apparent reason that simply loops back to the page already on!!!

#7 @DJPaul
17 months ago

Let's remove these links and replace with DIVs for Nouveau. Less certain about modifying Legacy at this point, but I don't mind too strongly.

Last edited 17 months ago by DJPaul (previous) (diff)

#8 @DJPaul
17 months ago

  • Priority changed from normal to low

17 months ago

#9 @mercime
17 months ago

  • Keywords has-patch added

#10 @hnla
17 months ago

My tests replacing with a div for Nouveau seemed ok so lets commit your patch @mercime my only reservation being the Legacy changes, feel we should focus on Nouveau where we can change with impunity whereas are we sure we can change Legacy templates with certain safety e.g no one might have done 'something' based on the anchor??

#11 @DJPaul
17 months ago

I had exactly the same thought about whether we should change Legacy, but I didn’t say anything because I didn’t want to influence the discussion before Hugo commented.

I’m agreeing with hnla here

#12 @mercime
17 months ago

  • Owner set to mercime
  • Resolution set to fixed
  • Status changed from new to closed

In 11995:

BP Nouveau: Replace empty links for Group & Member Header Cover Images.

Props hnla, DJPaul.
Fixes #7747.

Note: See TracTickets for help on using tickets.