[Resolved] skip link to #content bypasses the h1 title

[Simon]

Hi

I realise that the skip-link to #content effectively jumps over the category title on the archives, and jumps over the H1 title on posts with Hero images (using Dispatch).

To miss all the titles will be very confusing for someone relying on screen readers.

I know I can create an alternative div ID higher up by using a wonderful GP hook element, but can I also edit the skip link to go to it instead of #content ??

I’m sure someone must have asked this before, but I’ve searched and cannot find it.

Hope you can help. Thank you.
Simon

[David]

Hi there,

try this PHP Snippet to unhook the GP function and insert your own:

add_action('wp', function(){
    remove_action( 'generate_before_header', 'generate_do_skip_to_content_link', 2 );
    add_action( 'generate_before_header', 'custom_do_skip_to_content_link', 2 );
});

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

Just update the #your_section_id for your needs

[Simon]

Wow. David thank you. I’ll try it and let you know.

[Simon]

Thank you. It works.

I haven’t heard it on a screen-reader, but I can see the link is there:

<a class="screen-reader-text skip-link" href="#jump-nav" title="Skip to content">Skip to content</a>

and lower down after the navigation I have the destination anchor which I created with a hook element after-navigation:

<div id="jump-nav"></div>

It makes me think – on a mobile it is always tedious and confusing that links go to the standard page header rather than the content, yet on a larger screen it is right to do so because you can see both. Is there a simple way to make links eg to /events/ link instead to /events/#jump-nav on mobile phones?

[David]

hmmm…. i am not even sure where to begin with ‘redirecting’ on mobile only. I think its going to require JS, maybe some bright spark on Stack Exchange has an answer…

[Rafał]

Thank you, David! Again 🙂
I think it’s good for UX to enable smooth scrolling,
then link should have the corresponding class smooth-scroll.

<a class="screen-reader-text skip-link smooth-scroll" href="#your_section_id" title="%1$s">%2$s</a>

[David]

Glad you found it useful!

[Simon]

Hi David – just to say I did find a solution to the question I posed above, about how to make a link eg to /events/ into a link instead to /events/#jump-nav on mobile phones. I used some code you offered elsewhere, but it was also one of those occasions when by clarifying the question you find the answer…

https://generatepress.com/forums/topic/links-on-mobile-phones-to-go-directly-to-the-content-and-skip-headernavigation/

[David]

Awesome – so glad to hear that – and thanks for closing the loop with this topic.

[Author]

Posts