Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing skip link destination for keyboard accessibility?


xallarap

Question

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 post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 0

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

Edited by tcp13

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0

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!

Link to post
  • 0

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>

 

Edited by tcp13

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post
  • 0

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

 

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...