Topic: Custom Aria Label on “Read More” Button

BCDPChair
August 13, 2023 at 1:43 pm

Hi there – I’d like to be able to customize the aria label on my “Read More” button to pass accessibility checks, similar to this post: https://generatepress.com/forums/topic/change-aria-label-of-read-more-button/

However, I’ve customized the “Read More” text in the Customizer, and the custom code snippet from the answer above reverses my customization.

I would like the aria label to say, “%customreadmoretext% ‘%post-title%'”, for example.

Is that something you can help with?

Fernando

August 13, 2023 at 6:01 pm

Hi there,

Yes, we can help with this.

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 %5$s</a></p>',
				the_title_attribute( 'echo=0' ),
				esc_url( get_permalink( get_the_ID() ) ),
				__( 'Custom Read more', 'generatepress' ),
				__( 'Custom Read more Aria', 'generatepress' ),
				get_the_title()
			);
		return $output;
}

Let us know how it goes.

BCDPChair
August 13, 2023 at 6:13 pm

I think this is getting me closer! However, this snippet is overriding the settings I have in the Customizer.

Is it possible to pull in whatever dynamic text is entered in the Customizer for the ‘Read More’ label, and output it next to the post title ONLY in the aria label? Without overriding the ‘Read More’ label settings entirely?

I also noticed that the snippet caused the Read More links to revert to buttons, although I have that disabled in the Customizer.

Screenshot 1

Screenshot 2

Fernando

August 13, 2023 at 7:35 pm

Try this:

add_filter('generate_excerpt_more_output', 'custom_read_more');

	function custom_read_more($output) {
		$generate_settings = wp_parse_args(
			get_option( 'generate_blog_settings', array() ),
			generate_blog_get_defaults()
		);

			$output = sprintf(
				' ... <a title="%1$s" class="read-more" href="%2$s" aria-label="%4$s">%3$s %5$s</a>',
				the_title_attribute( 'echo=0' ),
				esc_url( get_permalink( get_the_ID() ) ),
				$generate_settings['read_more'],
				__( 'Read more', 'generatepress' ),
				get_the_title()
			);
		return $output;
}

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Custom Aria Label on “Read More” Button