Search bar is missing accessibility features

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

Hello,

I am using the Impact template and the integrated search bar (top right). 

I have just checked our site for accessibility and found out that the search bar has no form labels and the button has no value text. 

Is there any chance to change it?

Thank you,

Kristin

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

Hi @KriBa

I came across this post and your code injection is really helpful, but I can't get it to work on the search input on the search results page.

I tried this, and also using the id but it doesn't work.

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

Any tips?

@jenthomson Can you share link to search page on your site?

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

Sorry I did not get a notification about the replies.

@tcp13 I have used your code and it still doesnt work. 

This is the site: https://www.iapondeathsincustody.org/search

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

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