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

[halilesen]

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/

[sabernhardt]

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.

[halilesen]

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.

[joedolson]

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