[Resolved] Removing Title Attribute From Skip To Content And Scroll to Top Button

[Jeffrey]

Hello. I’ve been testing my website with a screenreader trying to clean up and redundant readings of links and text.

1.) I need help removing the title attribute from the skip to content button as the title attribute is the same as the link text and because of this, it is read twice by the screen reader.

2.) Regarding the scroll to the top button, it has an Aria label and a title attribute so this is also being read twice.
I want to remove the title from the scroll to top button so it isn’t read twice by the screen reader.

Thanks for the help!

[Elvin]

Hi,

1.) You can refer to Tom’s answer here to manipulate the skip to content link.
https://generatepress.com/forums/topic/wcag-2-0-aa-redundant-title-issue/#post-825091

2.) To clarify: Did you mean the “back to top” button?

If so, here’s a PHP snippet to change its output.

add_filter( 'generate_back_to_top_output', 'tu_custom_back_to_top_icon' );
function tu_custom_back_to_top_icon() {
    printf(
		'<a title="%1$s" href="#" class="generate-back-to-top" style="opacity:0;visibility:hidden;" data-scroll-speed="%2$s" data-start-scroll="%3$s">
				<span class="screen-reader-text">%5$s</span>
				%6$s
			</a>',
			esc_attr__( 'Scroll back to top', 'generatepress' ),
			absint( apply_filters( 'generate_back_to_top_scroll_speed', 400 ) ),
			absint( apply_filters( 'generate_back_to_top_start_scroll', 300 ) ),
			esc_attr( apply_filters( 'generate_back_to_top_icon', 'fa-angle-up' ) ),
			esc_html__( 'Scroll back to top', 'generatepress' ),
			generate_get_svg_icon( 'arrow' )
	);
}

Change the value of esc_html__( 'Scroll back to top', 'generatepress' ), to your preference.

[Jeffrey]

1.) There appears to be a problem with the solution that Tom came up with. When inserting his snippet of code it is no longer providing a double read when using a screenreader. However, It appears that it’s generating a second skip to content button over top of the first one. So when I’m tabbing through the page skip to content is highlighted and read once and then the next tab causes the second skip to content to be read as well.

2.) I added your code and was able to get what I needed from it but the arrow is now facing downwards instead of upwards.

I’m currently running both of the snippets on my website in their original and unedited version. If you need to look at the site for more clarification I have provided it in the private information section.

Thanks for your help so far!

[Elvin]

1.) Try this instead:

add_filter('after_setup_theme', function(){

remove_action( 'generate_before_header', 'generate_do_skip_to_content_link', 2 );

add_action( 'generate_before_header', function() {
    printf( '<a class="screen-reader-text skip-link" href="#content">%s</a>',
        esc_html__( 'Skip to content', 'generatepress' )
    );
}, 2 );
});

2.) Ah right, the default ‘arrow’ points downwards. My bad.

Replace generate_get_svg_icon( 'arrow' ) within the snippet to generate_get_svg_icon( 'arrow-up' ).

[Author]

Posts