Changing skip link destination for keyboard accessibility?

Hello! My client noticed that the keyboard link navigation (going through links with Tab) gets caught up in the full-page slideshow on the homepage. Because there is a link on each slide, the keyboard nav goes through each slide even if it's not being currently shown on the page. 

So basically  I would like to reroute the "Skip to Content" button that pops up when you hit Tab, to skip this slideshow and go to the next block on the homepage. I'm pretty sure I have to do something with the code below, but I don't know exactly what,  and I don't know where to put it (page injection?) 

<a href="#page" tabindex="1" class="header-skip-link">
      Skip to Content
    </a>

Website: https://triceratops-maroon-kxrm.squarespace.com/
password: nailed

Any ideas would be greatly appreciated. Thanks!

Hey @xallarap,

Changing the target of a skip link to anything other than the semantic main region is generally not advisable, but this is a great use case for customizing the skip link target for improved keyboard navigation.

You can do this by adding some jQuery to the page header injection. This code starts with the known data-section-id, retrieves the dynamically-generated YUI ID, and assigns that as the skip link's new target.

<!-- If you don't already have jQuery installed, add it here first. -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<script>
  //This code runs when the DOM is ready.
  $(document).ready(function(){

    //This code starts with the known data-section-id attribute of whatever section you want to skip to.
    //You'll need to customize this for each page, since each page has unique section IDs.
    var targetSection = ".page-section[data-section-id='5f4af760184e171b10d9cf64']";

    //This code retrieves the dynamically-generated YUI ID from the section.
    var targetId = $(targetSection).attr("id");

    //This code changes the skip link target to the new ID.
    $(".header-skip-link").attr("href","#" + targetId);

  });
</script>

You'll want to inject this within the "Page Header Code Injection." To get there, click the cogwheel icon for each page, and navigate to the "Advanced" tab. When you paste in the above code, you'll have to customize the "targetSection" value depending on which page you're injecting it to. This is because each page's sections have unique section IDs:

• For the "Poetry" page, set the targetSection to ".page-section[data-section-id='5f4b0223184e171b10dac9e8']"
• For the "Visual" page, set the targetSection to ".page-section[data-section-id='5f4b016864cb372724b87e42']"
• For the "Prose" page, set the targetSection to ".page-section[data-section-id='5f4af760184e171b10d9cf64']"

You'll also only want to inject this on the pages that have slideshows - that way the skip link remains as is for all other pages (such as the blog post pages that don't have a slideshow banner).

Here's the expected result:

With the skip link target set to the correct YUI ID:

If you're looking for further accessibility help, feel free to DM me or send us a message at SquareADA.com. We've also got a free accessibility audit tool that offers accessibility recommendations for any Squarespace site.

Hope this helps!
-Tyler

Hi @tcp13, thank you SO MUCH for your response and taking the time to find a solution for this!! I added this to my 'Prose' page's header injection, but it doesn't seem to be working. Is there something else I have to add to the code to make it work? Thank you again!

Hmmm, it seems the section ID isn't loading in fast enough.

Let's try changing this line of code:

//This code runs when the DOM is ready.
$(document).ready(function(){

to this instead:

//This code runs when the page is ready.
$(window).load(function(){

If that still doesn't work, we can try adding in an additional delay to let the target section fully load in. Something like this:

<!-- If you don't already have jQuery installed, add it here first. -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<script>
  //This code runs when the DOM is ready.
  $(window).load(function(){

    //This code adds in an additional delay.
    setTimeout(function(){

      //This code starts with the known data-section-id attribute of whatever section you want to skip to.
      //You'll need to customize this for each page, since each page has unique section IDs.
      var targetSection = ".page-section[data-section-id='5f4af760184e171b10d9cf64']";

      //This code retrieves the dynamically-generated YUI ID from the section.
      var targetId = $(targetSection).attr("id");

      //This code changes the skip link target to the new ID.
      $(".header-skip-link").attr("href","#" + targetId);

    }, 1000);

  });
</script>

Thanks for the speedy response! Something is still not working... for me it still jumps to /prose#page instead of the specific section. 

We managed to get this working after a bit more trial and error via DM! 😀 For posterity's sake, here's the final custom code we used in case anyone else is searching for a solution in the future:

<!-- CUSTOM SKIP LINK -->

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<script>
  //This code runs when the DOM is ready.
  $(document).ready(function(){

    //The page takes a moment to load in, so this code iterates itself 3 times. 
    var parse = 1; var t = setInterval(function(){
      if(parse >= 3){clearInterval(t);}
      else{

        //This code starts with the known data-section-id attribute of whatever section you want to skip to.
        //You'll need to customize this for each page, since each page has unique section IDs.
        var targetSection = ".page-section[data-section-id='5f4af760184e171b10d9cf64']";

        //This code retrieves the dynamically-generated YUI ID from the section.
        var targetId = $(targetSection).attr("id");

        //This code changes the skip link target to the new ID.
        $(".header-skip-link").attr("href","#" + targetId);

        parse++;}}, 500);
  });
</script>

<style>
  /*Use a visible focus indicator for the archive categories.*/
  .archive-group-list a:focus{outline: 2px solid #000 !important;}
</style>

<!-- END CUSTOM SKIP LINK -->