Jump to content

Changing skip link destination for keyboard accessibility?

Recommended Posts

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!

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

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:

ezgif.com-gif-maker.gif.4628032bc0047c3fd247c4a0e3fd0a10.gif

 

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

image.png.53fbb229d2cd113281b71b89073861c4.png

 

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

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

Link to comment

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

image.png.136cb9bdc9a74af262acbb359af49d19.png

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>

 

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

Link to comment

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 -->

 

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.