Make WordPress Core

Opened 4 years ago

Last modified 2 years ago

#50561 assigned defect (bug)

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

Reported by: eatingrules's profile eatingrules Owned by: sabernhardt's profile 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 4 years 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 4 years ago.
50561.2.diff (3.2 KB) - added by sabernhardt 4 years ago.
slight revision: using Yoda condition for the http absolute URL check

Download all attachments as: .zip

Change History (15)

#1 @eatingrules
4 years 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
4 years ago

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

#2 @eatingrules
4 years 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 years 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 years 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 years 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.


4 years ago

#7 @sabernhardt
4 years 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 4 years ago by sabernhardt (previous) (diff)

@sabernhardt
4 years ago

#8 @sabernhardt
4 years 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
4 years ago

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

#9 @pbiron
4 years 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 years ago

#11 @sabernhardt
3 years 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.

#12 @sabernhardt
2 years ago

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

Note: See TracTickets for help on using tickets.