WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 13 days ago

#47670 reviewing defect (bug)

RSS widget creates an accessibility problem when used more than once

Reported by: tpaw Owned by: audrasjb
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Widgets Keywords: has-screenshots needs-patch
Focuses: accessibility Cc:

Description

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.

Attachments (9)

47670.diff (966 bytes) - added by mukesh27 2 months ago.
Patch.
before-patch-feed-with-title.png (156.2 KB) - added by audrasjb 7 weeks ago.
Before 47670.1.diff: feed with title
before-patch-feed-without-title.png (160.4 KB) - added by audrasjb 7 weeks ago.
Before 47670.1.diff: feed without title
after-patch-feed-with-title.png (152.6 KB) - added by audrasjb 7 weeks ago.
After 47670.1.diff: feed with title
after-patch-feed-without-title.png (157.3 KB) - added by audrasjb 7 weeks ago.
After 47670.1.diff: feed without title
47670.1.diff (965 bytes) - added by audrasjb 7 weeks ago.
Remove double link in Widget RSS
Capture d’écran 2019-08-02 à 19.48.23.png (186.3 KB) - added by audrasjb 7 weeks ago.
Testing 47670.1.diff with another bundled theme
Twenty Seventeen.png (36.3 KB) - added by afercia 13 days ago.
Twenty Seventeen completely breaks
Twenty Nineteen.png (21.9 KB) - added by afercia 13 days ago.
Minor: Twenty Nineteen underline extends to the empty space

Download all attachments as: .zip

Change History (20)

#1 @tpaw
2 months ago

  • Summary changed from RSS widget creates and accessibility problem when used more than once to RSS widget creates an accessibility problem when used more than once

#2 follow-up: @mukesh27
2 months ago

  • Keywords has-patch 2nd-opinion added

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

Patch.

#3 @audrasjb
2 months ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

Yes added to my list!

#4 in reply to: ↑ 2 @tpaw
8 weeks ago

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.

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


7 weeks ago

#6 @afercia
7 weeks ago

Related: #46978.

@audrasjb
7 weeks ago

Before 47670.1.diff: feed with title

@audrasjb
7 weeks ago

Before 47670.1.diff: feed without title

@audrasjb
7 weeks ago

After 47670.1.diff: feed with title

@audrasjb
7 weeks ago

After 47670.1.diff: feed without title

@audrasjb
7 weeks ago

Remove double link in Widget RSS

#7 @audrasjb
7 weeks ago

  • Keywords has-screenshots added
  • Milestone changed from Awaiting Review to 5.3

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
7 weeks ago

Testing 47670.1.diff with another bundled theme

#8 @audrasjb
4 weeks ago

  • Keywords 2nd-opinion removed

#9 @mukesh27
2 weeks ago

@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>'; 

#10 @afercia
13 days ago

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

#11 @afercia
13 days ago

  • Keywords needs-patch added; has-patch removed

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
13 days ago

Twenty Seventeen completely breaks

@afercia
13 days ago

Minor: Twenty Nineteen underline extends to the empty space

Note: See TracTickets for help on using tickets.