Make WordPress Core

Opened 3 months ago

Last modified 3 months ago

#59965 new defect (bug)

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

Reported by: halilesen's profile halilesen Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.1
Component: Comments Keywords:
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 (3)

#1 @sabernhardt
3 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
3 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
3 months ago

  • Version changed from 6.4 to 4.1
Note: See TracTickets for help on using tickets.