RSS widget creates an accessibility problem when used more than once

[tpaw]

Please consider the following patch to improve accessibility.

Accessibility guidelines in WCAG's standard 2.4.4 Link Purpose requires that link text should provide a purpose or context for the link.

In the RSS widget, the link text for the link to the RSS feed itself is an image of the RSS icon; its alt text is "RSS" which programmatically determines the link text. This passes the referenced standard.

A problem occurs when multiple instances of the RSS widget are used. There are then multiple links with link text "RSS", each of which lead to different URLs. The text "RSS" then does not provide enough context for visitors to know what each "RSS" link leads to.

The solution is the make each RSS link text unique to each feed's title, thus providing the necessary context.

Simply prepending the title of the widget instance adds the necessary context to the link text without using any additional words which could has i18n issues.

In class-wp-widget-rss.php (lines 89-91 in 5.2.2):

From:

<?php
// lines 89-91 in wp-includes/widgets/class-wp-widget-rss.php (WP 5.2.2)

if ( $title ) {
        $title = '<a class="rsswidget" href="' . esc_url( $url ) . '"><img class="rss-widget-icon" style="border:0" width="14" height="14" src="' . esc_url( $icon ) . '" alt="RSS" /></a> <a class="rsswidget" href="' . esc_url( $link ) . '">' . esc_html( $title ) . '</a>';
}

To:

<?php
if ( $title ) {
        $title = '<a class="rsswidget" href="' . esc_url( $url ) . '"><img class="rss-widget-icon" style="border:0" width="14" height="14" src="' . esc_url( $icon ) . '" alt="' . esc_html( $title ) . ' RSS" /></a> <a class="rsswidget" href="' . esc_url( $link ) . '">' . esc_html( $title ) . '</a>';
}

No harm is done when only a single instance of the RSS widget is used because the RSS link text is simply more explicit.

[mukesh27]

Hi @tpaw,

Welcome to WordPress Trac! Thanks for the ticket.

I think we have to remove that alt tag from RSS image because if anyone does not use feed title then image alt display space before RSS text, also RSS was not used any escaping function.

Remove alt text from the widget is a better solution.

@audrasjb can you check this?

[mukesh27]

Patch.

[audrasjb]

Yes added to my list!

[tpaw]

Replying to mukesh27:

I think we have to remove that alt tag from RSS image because if anyone does not use feed title then image alt display space before RSS text, also RSS was not used any escaping function.

Remove alt text from the widget is a better solution.

@audrasjb can you check this?

Thank you for reviewing this.

Unfortunately, removing the alt text means that one will then have an "empty" link, as it would effectively become an <a href="url"></a> in the accessibility DOM.

Links must have some sort of link text, whether it's regular text or alt text from an image, so your proposed solution will still violate WCAG accessibility guidelines.

By leaving the user-specified title in, at least there is a chance and ability for users to correctly adhere to WCAG. Without any link text, it's still basically the same problem of not meeting a11y guidelines.

[afercia]

Related: #46978.

[audrasjb]

Before 47670.1.diff: feed with title

[audrasjb]

Before 47670.1.diff: feed without title

[audrasjb]

After 47670.1.diff: feed with title

[audrasjb]

After 47670.1.diff: feed without title

[audrasjb]

Remove double link in Widget RSS

[audrasjb]

In 47670.1.diff:

• Use only one link for both image and title of the RSS feed
• Use an empty alt attribute since we doesn't need it anymore

Ping @afercia for code review.

Also moving this ticket to 5.3 milestone.

[audrasjb]

Testing 47670.1.diff with another bundled theme

[mukesh27]

@audrasjb Is it possible to remove rsswidget class from the text as same class used in parent link?

$title = '<a class="rsswidget" href="' . esc_url( $url ) . '"><img class="rss-widget-icon" style="border:0" width="14" height="14" src="' . esc_url( $icon ) . '" alt="" /> <span class="rsswidget rsswidget-text">' . esc_html( $title ) . '</span></a>'; 

Replace to

$title = '<a class="rsswidget" href="' . esc_url( $url ) . '"><img class="rss-widget-icon" style="border:0" width="14" height="14" src="' . esc_url( $icon ) . '" alt="" /> <span class="rsswidget-text">' . esc_html( $title ) . '</span></a>'; 

[afercia]

For reference: recommended technique from the Web Content Accessibility Guidelines (WCAG):

Combining adjacent image and text links for the same resource
​https://www.w3.org/WAI/WCAG21/Techniques/html/H2.html

[afercia]

I'm afraid it's a bit more complicated than expected. The two links can be styled by the themes. For example, Twenty Seventeen targets the first <a> child. Other themes may use any sort of CSS selectors including type (element) selectors so it's not just a matter of CSS classes: changes to the markup will likely break some themes. See screenshots below.

The only alternative option I can think of is removing the href from the icon link but that would make the icon non-clickable.

[afercia]

Twenty Seventeen completely breaks

[afercia]

Minor: Twenty Nineteen underline extends to the empty space

[sabernhardt]

It took me a while to realize that the two links have different URLs. The image link gives the feed URL itself, and the text link directs to the source's website.

So the alt text could be something like this to accommodate multiple feeds:

sprintf( esc_attr__( 'Access Feed URL for %s' ), $title )

Another option: use that new text string as an aria-label instead (with the translated "RSS" as alt text), so anyone who might turn images off would not see the full title twice.

$title = '<a class="rsswidget" href="' . esc_url( $url ) . '" aria-label="' . sprintf( esc_attr__( 'Access Feed URL for %s' ), $title ) . '"><img class="rss-widget-icon" style="border:0" width="14" height="14" src="' . esc_url( $icon ) . '" alt="' . esc_attr__( 'RSS' ) . '" /></a> <a class="rsswidget" href="' . esc_url( $link ) . '">' . esc_html( $title ) . '</a>';

[audrasjb]

This ticket still needs some work and improvements. Also, it could be probably better to remove completely the RSS icon as it's theme territory.
Moving it to Future release.

[sabernhardt]

While I think there are cases where the feed URL is valuable to include, I realize that it makes little sense to have both links within the same heading tag. Also, anyone can add a separate link to the feed URL if they intend to make it available.

[temporary suggestion removed]

[sabernhardt]

I proposed a filter and/or widget options on #52224, which might be good enough to fix this.

[sabernhardt]

After noticing that the admin toolbar's extra profile link currently uses a negative tabindex (since r19207), that attribute seems viable in this case, too.

The feed link also would need aria-hidden="true" to hide it (with NVDA).

To minimize the changes in 47670.tabindex.patch​, I kept the direct feed URL (instead of matching the text link) plus the untranslated alt text.

If the aria-hidden and tabindex attributes make sense here, they could be added to the more elaborate proposal (#52224) as well. Both these tickets could close with one commit if that filter option suffices.

[tpaw]

Replying to sabernhardt:

After noticing that the admin toolbar's extra profile link currently uses a negative tabindex (since r19559), that attribute seems viable in this case, too.

The feed link also would need aria-hidden="true" to hide it (with NVDA).

I believe that adding both tabindex="-1" and aria-hidden="true" attribute on the RSS icon's wrapping a tag (not on the img itself) is an elegant and standards-based solution to remove the linked icon from the Accessibility DOM. This would solve the issue of duplicate link text leading to different URIs violating the WCAG 2.4.4 standard.

[sabernhardt]

The filter from #52224 is available to remove the icon link in classic widgets, and the block widgets already did not include it, so this error is avoidable. In case using the negative tabindex is still a good idea when the link remains in the widget, I updated the patch.

[joedolson]

If the two links had duplicate targets, this would be a viable path - hiding a duplicate link is reasonable. However, with two different links, we've now created a link that's only accessible to sighted mouse users, so it's a whole new problem.

I propose that instead we focus on improving the labeling of the RSS icon. We have the title of the feed from the feed source, so we could use an alt attribute in the format RSS Feed: feed source title; then each link has a unique title, as long as there aren't multiple widgets pointing to the same feed. (Which I'd consider outside the scope of what we can account for.)