Jump to content

Skip Link in Header for Web Content Accessibility Guidelines

Recommended Posts

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!

Link to comment
  • 4 months later...

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:

47939115_ezgif.com-gif-maker(5).gif.56fab95aa43c192d1d5322d7b1c8fe71.gif

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

Edited by tcp13

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment

Hey there @northamrealty,

35 minutes ago, northamrealty said:

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

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
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.

Edited by tcp13

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
  • 1 month later...
  • 6 months later...
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

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
  • 1 year later...

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:

"Some elements have a [tabindex] value greater than 0
 
A value greater than 0 implies an explicit navigation ordering. Although technically valid, this often creates frustrating experiences for users who rely on assistive technologies."
 
How can I put tabindex=0?

Thank you
Link to comment
  • 4 weeks later...

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>

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.