WordPress.org

Make WordPress Core

Opened 5 weeks ago

Last modified 4 weeks ago

#50561 new enhancement

Links Widget display: Image alt text and link name are redundant for screen readers

Reported by: eatingrules Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version:
Component: Widgets Keywords: has-patch
Focuses: accessibility Cc:

Description

When using the Links Widget to display links with an Image and a Name ("Show Link Image" and "Show link Name" are both selected in the widget settings), the alt text on the image will be identical to the link name.

For example:

<a href="https://eatingrules.com/how-to-make-chocolate/">
<img src="https://eatingrules.com/wp-content/uploads/2012/10/finished-homemade-chocolates-128x128.jpg"  alt="How to make Chocolate"  />
 How to make Chocolate
</a>

Since the image and the link name are both wrapped in the same anchor tag, this violates accessibility guidelines. It's redundant and would be annoying when using a screen reader.

If a Link Description is added, it will use that for the alt text instead, which is a little bit better, since it's at least not redundant.

However, I think a better solution would be to use an empty/null alt text instead, since in this case the image is decorative. https://www.w3.org/TR/WCAG20-TECHS/H2.html

Another option might be to add aria-hidden="true" to the <img> if both the alt and link text are the same?

Attachments (1)

50561.diff (978 bytes) - added by eatingrules 5 weeks ago.
Adds aria-hidden="true" to images if both the image and title are being displayed by the Links widget.

Download all attachments as: .zip

Change History (6)

#1 @eatingrules
5 weeks ago

Actually, I just checked again and realized that if a Link Description is set, it does NOT set the Alt Text to the description, so that's not a viable workaround.

If the description is added, it adds the description as a "title" attribute on both the <a> and <img>... which seems even worse for accessibility. (See also: #24766)

@eatingrules
5 weeks ago

Adds aria-hidden="true" to images if both the image and title are being displayed by the Links widget.

#2 @eatingrules
5 weeks ago

  • Keywords has-patch added

After discussing with a couple of folks, it seems that adding aria-hidden="true" to the <img> tag is the simplest and cleanest solution. This way a screen reader will simply skip the image, and the duplicate alt text isn't an issue.

#3 @afercia
4 weeks ago

  • Version trunk deleted

Thanks @eatingrules. You're absolutely correct. I'd add the title attribute is arguably of any usefulness as well, see https://core.trac.wordpress.org/query?keywords=~title-attribute

However, the Links widgets is disabled by default since years as of WordPress 3.5, together with the "Link Manager". It can be re-enabled only via the Link Manager plugin, which is a bit old as well and no longer maintained.

In short, this functionality is not really supported by WordPress, but I'll propose the accessibility team to have a look :)

#4 @eatingrules
4 weeks ago

Thanks @afercia.

Interesting - I don't have the Links Manager plugin installed, yet I still have access to the Links Manager and Widget on eatingrules.com. (I created my site in 2010; definitely pre-3.5!)

I think if there are any links in the database from pre-3.5, core will still show the Links Manager and the Links Widget (no extra plugin necessary)?

In any case, this is still part of core, and if I'm using this setup, other sites probably are too... so it would be good to improve this for whomever else that might be. :)

#5 @afercia
4 weeks ago

Oh yes, it is definitely possible it was disabled only for "new installs". Will double check thanks!

Note: See TracTickets for help on using tickets.