WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 2 months ago

#50561 assigned defect (bug)

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

Reported by: eatingrules Owned by: sabernhardt
Milestone: Future Release Priority: normal
Severity: minor Version:
Component: Widgets Keywords: has-patch needs-testing
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 (3)

50561.diff (978 bytes) - added by eatingrules 16 months ago.
Adds aria-hidden="true" to images if both the image and title are being displayed by the Links widget.
50561.1.diff (3.1 KB) - added by sabernhardt 9 months ago.
50561.2.diff (3.2 KB) - added by sabernhardt 9 months ago.
slight revision: using Yoda condition for the http absolute URL check

Download all attachments as: .zip

Change History (14)

#1 @eatingrules
16 months 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
16 months ago

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

#2 @eatingrules
16 months 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
16 months 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
16 months 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
16 months ago

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

This ticket was mentioned in Slack in #core by hellofromtonya. View the logs.


11 months ago

#7 @sabernhardt
11 months ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from Awaiting Review to Future Release
  • Owner set to sabernhardt
  • Status changed from new to assigned
  • Type changed from enhancement to defect (bug)

I'll create a patch that removes the title attributes. It will also empty the alt when (and only when) the link name is visible.

Last edited 11 months ago by sabernhardt (previous) (diff)

@sabernhardt
9 months ago

#8 @sabernhardt
9 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

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
9 months ago

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

#9 @pbiron
6 months ago

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.

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


3 months ago

#11 @sabernhardt
2 months ago

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.
Note: See TracTickets for help on using tickets.