[Resolved] Change aria label of read more button

[Babi]

My sites using Generatepress are getting dinged in accessibility audits because the aria label of the ‘read more’ links or buttons doesn’t match the visible text of the element (the relevant standard is: https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html).

How can I alter the aria label and/or the text of the button or link to make them match?

I have tried using the Code Snippets plugin and the filter described here: https://docs.generatepress.com/article/activating-read-custom-excerpt/, but it has no effect on the link markup.

See, for example, this site: https://historyarvada.org/blog/

[Ying]

Hi Babi,

The default aria-label has more detailed info which included the post title, are you sure you want to change it to just read more?

If so, try this PHP snippet:

add_filter('generate_excerpt_more_output', 'custom_read_more');

	function custom_read_more($output) {
			$output = sprintf(
				' ... <p class="read-more-container"><a title="%1$s" class="read-more button" href="%2$s" aria-label="%4$s">%3$s</a></p>',
				the_title_attribute( 'echo=0' ),
				esc_url( get_permalink( get_the_ID() ) ),
				__( 'Read more', 'generatepress' ),
				__( 'Read more', 'generatepress' )
			);
		return $output;
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Babi]

Thanks–that snippet works.

But no, I don’t want to just change the aria-label to “read more”, because you’re right–what’s there is much better. But by my reading of the accessibility guidelines, the two don’t have to exactly match. Rather, the aria-label just has to contain (ideally start with) the visible text (https://www.w3.org/WAI/WCAG21/Techniques/general/G208.html).

So what I’m after is something like:
' ... <p class="read-more-container"><a title="[post title]" class="read-more button" href="[url]" aria-label="Read more of the post [post title]">Read more</a>

I am not 100% sure that that will pass muster in the audit, but I think so.

[Ying]

In that case, try this snippet instead:

add_filter('generate_excerpt_more_output', 'custom_read_more');

function custom_read_more($output) {
	$output = sprintf(
       ' ... <p class="read-more-container"><a title="%1$s" class="read-more button" href="%2$s" aria-label="%4$s">%3$s</a></p>',
       the_title_attribute( 'echo=0' ),
       esc_url( get_permalink( get_the_ID() ) ),
       __( 'Read more', 'generatepress' ),
       sprintf(
	       /* translators: Aria-label describing the read more button */
	       _x( 'Read more of the post %s', 'more on post title', 'generatepress' ),
	       the_title_attribute( 'echo=0' )
       )
    );
	return $output;
}

[Babi]

Perfect! That passed the accessibility audit with flying colors.

[Ying]

🙂 Glad to hear that

[Mohammad Rashid]

No it not works for me

[Ying]

Hi Mohammad Rashid,

You are welcome to open a new topic if this solution doesn’t work for you 🙂

[Author]

Posts