• Resolved triprems

    (@triprems)


    Hello,

    I’m trying to add an ARIA-label to the “Read More” link for post excerpts (including the post title for WCAG conformance), but I am not able to make this change using the default WordPress filter (the_content_more_link).

    I’ve also tried using the custom filter provided by Responsive theme (responsive_post_read_more) .

    Could you please advise on the best way to customize “Read more” links for post excerpts?

    Thanks.

    -Trip

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hello @triprems,

    The filters ‘the_content_more_link’ and ‘responsive_post_read_more’ filters the ‘Read More’ links text.

    You can use the hook responsive_post_link to filter the link to add attributes like ‘aria-label’.

    Thread Starter triprems

    (@triprems)

    Hello,

    Thanks for the information. Could you please provide a sample script for the hook that you provided?

    Also, I noticed that the settings for Excerpt length, Read More Text, and Read More Type do not seem to have any effect when updating the posts page in the theme customizer.

    Thanks.

    -Trip

    • This reply was modified 2 years, 12 months ago by triprems.

    Hello @triprems,

    Below is a sample script regarding your query to add “aria-label” attribute to the Read More link –

    function responsive_post_link_attr( $output ) {
    	return str_replace( '<a ', "<a aria-label='Read More'", $output );
    }
    
    add_filter( 'responsive_post_link', 'responsive_post_link_attr', 20 );

    We have tested the mentioned excerpt settings and found no issue. The following is the path of setting we tested –
    Customizing > Blog / Archive > Blog / Archive > Entry Content.

    Could you please share the screenshot of the issue you are facing? Also, can you please check if there are any errors in the console?

    Thread Starter triprems

    (@triprems)

    Hello,

    Thanks for sharing the sample script for customizing the posts excerpt link. I’ve added this to the child theme functions file, but I am not seeing any changes to the link attributes (see screenshot link below).

    Also, I’ve shared a screenshot of the theme customizer showing the Entry Content Settings which seem to have no effect.

    Interestingly, this issue seems to only occur for posts with an excerpt, as posts without one correctly display the link as a button with the new ARIA-label.

    Here is a link to the screenshots for reference: https://imgur.com/a/HGjsmpR .

    Any advice would be greatly appreciated.

    Thanks.

    -Trip

    Hello @triprems,

    The feature option you are trying is for Generated excerpt. We are working to add similar feature for Defined (custom) excerpt which will be available in our future releases.

    You can add the following sample script to add aria-label to Read More link in your child theme –

    function responsive_post_link_attr( $output ) {
    	return str_replace( '<a ', "<a aria-label='Read More'", $output );
    }
    add_filter( 'the_excerpt', 'responsive_post_link_attr', 20 );

    Note*: The above filter callback (responsive_post_link_attr) will add aria-label attribute to all anchor tag in your excerpt. Make changes accordingly.

    Thread Starter triprems

    (@triprems)

    Hello,

    Thanks for posting the updated script. It works perfectly, and I was able to customize the ARIA-label to include the post title for WCAG conformance (using get_post_title).

    Thanks for all of your help and assistance!

    Aloha,

    -Trip

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Read More Links’ is closed to new replies.