Jump to content

Search bar is missing accessibility features

Recommended Posts

  • 2 months later...

Hi @KriBa,

Still looking for some help with this? Try adding the following within Settings > Advanced > Code Injection > Header Injection:

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

<!-- Add Search Labels for Accessibility -->
<script>
  $(document).ready(function(){
    $(".Header-search-form-input").attr("aria-label", "Search");
    $(".Header-search-form-submit").attr("aria-label", "Submit Search");
  });
</script>

If you're looking for further assistance dealing with WAVE errors, feel free to send me a DM or checkout our free audit tool at squareada.com/audit.

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
  • 4 months later...

Hi @jenthomson,

For the search results page (as in squarespace.com/search), it's a different selector. Try this:

$(".sqs-search-page-input input").attr("aria-label", "Search");

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

Hi @jenthomson,

The search bar on that page doesn't immediately load in on $(document).ready, so you may need to add an additional delay. Something like this:

setTimeout(function(){
  $(".sqs-search-page-input input").attr("aria-label", "Search");
}, 1000);

Hope this helps! Feel free to send me a DM if you're looking for further assistance.

-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

@jenthomson

For these kind of loading issues you may want to consider using a MutationObserver. It is more complicated than a setTimeout but you don't have to estimate how long it will take for the element to show up and possibly miss or delay something happening.

MO's are designed specifically for situations where you want to watch for a particular node to arrive on the DOM and then modify that element.

Please see Search Page Input Aria-Label Attribute Add.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.