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

[eatingrules]

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?

[eatingrules]

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]

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

[eatingrules]

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.

[afercia]

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 :)

[eatingrules]

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. :)

[afercia]

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

[sabernhardt]

I'll create a patch that removes the title attributes and empties the alt when the link name is visible.

[sabernhardt]

The patch 50561.1.diff​:

1. Removes all title attributes, from both links and images.
2. Removes the description from the alt text.
3. Creates empty alt text when the "Show Link Name" setting is checked.
4. Uses the link name as alt text when the link name is not set to display.
5. Removes the "Last Updated" date because it did not update the database value anyway when I updated the bookmark. (If there is a way to make that work, the "Last Updated" date could be added in an em tag immediately after the link.)

[sabernhardt]

slight revision: using Yoda condition for the http absolute URL check

[pbiron]

just gave 50561.2.diff​ a spin and it seems to do what it's intended to do.

Before this testing, I'd never used use the Links Widget (tho I do still use Links on a few sites).

Also, I should note that I'm not an accessibility expert, so I can't comment on the merits/goals of this ticket...just that the patch does what it says it does :-) I'll leave the needs-testing keyword in place, in others want/need to test that the patch meetings the accessibility goals of the ticket.

[sabernhardt]

Testing information

Before following the steps below, I think you might need to install and activate the Classic Widgets plugin now.

1. Upload the ​Link Manager plugin zip file (plugin search does not include it on the first page).
2. Activate the plugin.
3. Create a collection of links that have varied combinations of elements. In addition to the name and web address, these could include a description, image and/or rating.
4. Go to the Widgets screen and create a collection of Links widgets with different settings checkboxes checked, whether you want to show the name, description, image or rating.
5. Visit the site using a screen reader and pay attention to how the content for each bookmark is read. Record it if possible (NVDA has a Speech viewer under Tools).
6. Apply the patch.
7. Visit the site again, using a screen reader, and pay attention to how each link's content is read.

[sabernhardt]

The Bookmark API might be moved from Core to the plugin soon: #56362