Make WordPress Core

Opened 15 months ago

Closed 4 months ago

Last modified 4 months ago

#59965 closed defect (bug) (fixed)

Reply link: Elements with visible text labels do not have matching accessible names

Reported by: halilesen's profile halilesen Owned by: joedolson's profile joedolson
Milestone: 6.7 Priority: normal
Severity: normal Version: 4.1
Component: Comments Keywords: has-patch commit
Focuses: accessibility, template Cc:

Description

Hi,

When I scanned the page with PageSpeed ​​Insights, it gave the following error for reply link: Elements with visible text labels do not have matching accessible names.

aria-label problem. Because it is the same as the text. I solved it like this: I edited line 1822 in the wp-includes/comment-template.php file. I deleted it to be empty inside the quotes. The problem is fixed. I hope it will be fixed in new updates.

Topic: https://wordpress.org/support/topic/reply-link-elements-with-visible-text-labels-do-not-have-matching-accessible-na/

Change History (19)

#1 @sabernhardt
15 months ago

  • Focuses accessibility added; coding-standards removed
  • Summary changed from Reply link: Elements with visible text labels do not have matching accessible na to Reply link: Elements with visible text labels do not have matching accessible names

Hi and thanks for the report!

The aria-label was added to avoid having the same accessible name for all the Reply links in #16433 / [29822].

PageSpeed Insights gave an error because it did not find "Yanıtla" as part of the aria-label.
<a rel='nofollow' class='comment-reply-link' href='#comment-112' data-commentid="112" data-postid="210" data-belowelement="comment-112" data-respondelement="respond" data-replyto="Cevap Halil ESEN" aria-label='Cevap Halil ESEN'>Yanıtla</a>

It also seems that your site (either the theme or a plugin) overrides WordPress's default Turkish translation for the visible "Reply" text. "Cevapla" still could fail the automated test with an aria-label of "Cevap [commenter's name]", but it probably would sound close enough to recognize which link it is when seeing the text and hearing the label.

If you like using the commenter's name inside the visible text instead of a label, maybe the get_comment_reply_link() function could add a condition to use reply_to_text there and remove the label.

Additional notes:

  • The function docblock does not include reply_to_text yet.
  • I would like the quotes to be consistent (all double) within the same tag.

#2 @halilesen
15 months ago

Yes.

I customized the reply link as follows.

<?php comment_reply_link( array_merge( $args, array(
					'reply_text' => __('<svg xmlns="http://www.w3.org/2000/svg" class="cevaplasimgesi" style="vertical-align: -0.125em;" width="18" height="18" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16h7.2l-2.6 2.6L15 20l5-5l-5-5l-1.4 1.4l2.6 2.6H9c-2.2 0-4-1.8-4-4s1.8-4 4-4h2V4H9c-3.3 0-6 2.7-6 6s2.7 6 6 6z"/></svg><span>Cevapla</span>', 'textdomain'),
					'depth'      => $depth,
					'max_depth'  => $args['max_depth']
				) ) ); ?>

After deleting the inside of aria-label I realized it wasn't working. I tried different shapes, but eventually I had to change it back to the aria-label='%s' shape. I'm sure it will be edit in the best possible way.

Best.

#3 @sabernhardt
15 months ago

  • Version changed from 6.4 to 4.1

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


11 months ago

#5 @joedolson
11 months ago

  • Milestone changed from Awaiting Review to 6.6

It seems like it should be possible to set up the aria-label attribute to be aware of the link text, and that's at least worth exploring. At the very least, we can use this as an opportunity to provide some clarifying documentation to help theme developers avoid this issue.

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


8 months ago

#7 @khoipro
8 months ago

  • Keywords needs-patch added

#8 @sabernhardt
8 months ago

  • Milestone changed from 6.6 to 6.7

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


8 months ago

This ticket was mentioned in PR #7138 on WordPress/wordpress-develop by @snehapatil02.


6 months ago
#10

  • Keywords has-patch added; needs-patch removed

This PR enhances the accessibility of comment reply links by synchronizing the visible text and the aria-label attribute. This resolves issues where elements with visible text labels did not have matching accessible names.

### Changes

  • Added the use_reply_to_text parameter to the $args array with a default value of false.
  • Updated the function documentation to include descriptions for reply_to_text and use_reply_to_text.
  • Modified the link generation logic to use reply_to_text as the visible text when use_reply_to_text is true.
  • Removed the aria-label when it would be redundant (i.e., when use_reply_to_text is true).
  • Ensured consistent use of double quotes in HTML attributes.

---

Trac ticket: https://core.trac.wordpress.org/ticket/59965

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


6 months ago

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


4 months ago

#13 @jainil07
4 months ago

Test Report

Patch tested: https://github.com/WordPress/wordpress-develop/pull/7138

Environment

  • OS: Ubuntu
  • Web Server: Apache
  • WordPress: 6.7-beta1-59152-src
  • Browser: Chrome (125.0.6422.141 (Official Build) (64-bit))
  • Theme: Twenty Twenty-One
  • Active Plugins:
    • None

Actual Results

  • ✅ Issue resolved with patch.

Supplemental Artifacts

https://i.postimg.cc/B6bMmhth/Screenshot-from-2024-10-02-18-04-54.png

https://i.postimg.cc/d1fnp8yJ/Screenshot-from-2024-10-02-18-04-29.png

Last edited 4 months ago by jainil07 (previous) (diff)

#15 @joedolson
4 months ago

  • Keywords commit added

This is a good approach; rather than trying to magically change the aria-label value based on what the author passes into the function, it allows authors to set that value. While this has the weakness that an author is able to define an aria-label value that violates WCAG's label in name rule, anything that tried to construct a string using the existing reply_text value would have had significant translation problems.

I also like that this makes it possible to have a visible text using the current ARIA value, which is a significant accessibility benefit.

I'm extending the code comment on reply_to_text slightly to provide guidance relevant to WCAG 2.5.3, but otherwise I think this is good to go.

#16 @joedolson
4 months ago

Technically, authors could already set the value; but with no documentation in the parameter docs, that was unlikely to be done much...

#17 @joedolson
4 months ago

  • Owner set to joedolson
  • Resolution set to fixed
  • Status changed from new to closed

In 59181:

Comments: Enable using reply_to_text as visible link.

Add an option show_reply_to_text as an option to use the current aria-label attribute on comment reply links as the visible link. If used, remove the aria-label. Also add documentation of the reply_to_text parameter to the function documentation.

Props halilesen, sabernhardt, snehapatil02, jainil07, joedolson.
Fixes #59965.

Note: See TracTickets for help on using tickets.