Skip Link in Header for Web Content Accessibility Guidelines

Site URL: https://www.westlakeconsultinggroup.com/

Hello! I am looing to create a skip link in the header of my client's website to comply with Web Content Accessibility Guidelines.

Ideally, the link would be invisible to regular users, but accessible when navigating using the tab button - it would then link to an anchor lower on the site where the main content starts. 

Any help would be much appreciated, thank you!

Not an answer, but we have been searching for a way to accomplish the same task. Over the past few months we haven't been able to find a clean solution.

Hope someone here knows!

May 2021 EDIT: We recently published a blog post with free template-specific code snippets for almost every 7.0 template: https://squareada.com/resources/how-to-add-a-skip-link-to-your-squarespace-website-diy-guide

---

Hey there @kyledavis726 and @JTheater,

Skip links are built-in to all of the newer Squarespace templates running version 7.1, but if you're using a older template running version 7.0, you'll have to implement one with custom code.

In the case of the Westlake site you linked, try adding the following into Settings > Advanced > Code Injection > Header Injection:

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

<!--Skip Link-->
<script>
  $(document).ready(function(){$("body").prepend('<a href="javascript:skipTrigger();" class="skip-link" tabindex="0">Skip to Content</a>');});
  function skipTrigger(){$("#page").attr("tabindex", "-1").focus();}
</script>

<!--Skip Link Styles-->
<style>
  .skip-link {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
  .skip-link:focus {left:10px;top:10px;width:auto;height:auto;overflow:visible;background-color:#0f0f0f;color:#f0f0f0;size:1em;padding-top:0.5em;padding-bottom:0.5em;padding-left:1em;padding-right:1em;z-index: 99999;}
</style>

With this expected result when pressing the Tab key to navigate:

Hope this helps! Of course, adding a skip link is only a small component of WCAG compliance. If you're looking for a more robust accessibility solution, be sure to checkout the free audit tool linked in my forum signature, or consider working with an accessibility specialist such as myself to develop a more comprehensive strategy for your site.

Feel free to send me a DM if you need any further assistance with the skip link!
-Tyler

Hi @tcp13!

I am attempted the same thing for my company's website. That you for this code. I just insterted it and can see it at the top left of our page, but it doesn't link anywhere. Do I need to put an anchor in the main content for it to link to?

Our site is https://northamrealty.com/

Thank you!

Hey there @northamrealty,

35 minutes ago, northamrealty said:

Our site is https://northamrealty.com/

It's actually a different target element for your template. Use the same code as above, but swap out this section with the following:

<!--Skip Link-->
<script>
  $(document).ready(function(){$("body").prepend('<a href="javascript:skipTrigger();" class="skip-link" tabindex="0">Skip to Content</a>');});
  function skipTrigger(){$(".Index").attr("tabindex", "-1").focus();}
</script>

Hope this helps!
-Tyler

@tcp13 You're my hero! Thank you so much.

Hi again Tyler @tcp13 ,

I implemented the code but it appears to only work on the home page. Any idea why that may be?

Thank you!

1 hour ago, northamrealty said:

appears to only work on the home page

Ah, sorry about that @northamrealty! It appears your homepage has a different selector since it's an Index Page. Try modifying it one more time to target .Content-outer instead of .Index

<!--Skip Link-->
<script>
  $(document).ready(function(){$("body").prepend('<a href="javascript:skipTrigger();" class="skip-link" tabindex="0">Skip to Content</a>');});
  function skipTrigger(){$(".Content-outer").attr("tabindex", "-1").focus();}
</script>

That should work on every page within your template (include the homepage too). Feel free to DM me if you encounter any other issues.

Again @tcp13, you rock! Thank you for all your help.

Hi @tcp13,

Thank you so much for this code. I really, really appreciate it. 

Hi @tcp13

I have come across this answer which has been really useful for me improving a sites accessibility.

The only issue is that if I navigate to another page, it doesn't work. Is there something happening with the focus when you change pages that also needs to be set?

Thanks in advance.

On 10/11/2021 at 4:04 AM, jenthomson said:

The only issue is that if I navigate to another page, it doesn't work.

@jenthomson, try disabling "Ajax Loading" within site styles. See here: https://sf.digital/squarespace-solutions/why-doesnt-my-code-work-until-i-refresh-the-page

Perfect. Thank you!

Hi all, I am running some diagnose tools and the results camera back with few improvements. One of them is called tabindex="1".

Google is saying:

Hey @Togger, I saw the same issue when I was running diagnosis. My coding skills are not far off new-born but I managed to piece this together from some code posted by @tcp13on another thread and it seems to be working!

I placed it in the footer code injection to try and avoid any other performance penalties from Google by putting it in the header but no idea if that's the right thing to do!

---

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

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

    //This code changes the skip link tabindex to 0.
    $(".header-skip-link").attr("tabindex","0");

  });
</script>

hi @tcp13

Our site is: https://www.nuvvomarketing.com/

Ihave this error how i can fix it?

Skip to Content
<a href="#page" tabindex="1" class="header-skip-link sqs-button-element--primary">