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

Skip Link in Header for Web Content Accessibility Guidelines


kyledavis726

Question

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

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hey there @northamrealty, 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--> <sc

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

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

Posted Images

9 answers to this question

Recommended Posts

  • 1

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

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

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

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

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!

Link to post
  • 0
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

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