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.

@tcp13 Hello! Looking for some help with this as well if you are able - I have "no accessible name" popping up for my search icon & for the mobile menu on my Squarespace site. Is there any code to help with this? I am on 7.0, Rally template in the Brine family. www.mirandakelton.com

Thanks so much! 

9 hours ago, mirandakelton said:

I have "no accessible name" popping up for my search icon

Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
  $(".Mobile-bar-menu").attr("aria-label", "toggle mobile navigation menu");
  $(".Header-search-form-submit").attr("aria-label", "search");
</script>

Hi @tcp13, so sorry for my late response - just got the notification for this! I put the script into my code injection Header but am still getting the same errors in google page speed... not sure what's going on. Thanks so much for your help!

@mirandakelton,

You may need to wrap it in document ready:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
  $(document).ready(function(){
    $(".Mobile-bar-menu").attr("aria-label", "toggle mobile navigation menu");
    $(".Header-search-form-submit").attr("aria-label", "search");
  });
</script>

Otherwise, I'm not quite sure from here.

On 4/5/2023 at 10:02 PM, tcp13 said:

Try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
  $(".Mobile-bar-menu").attr("aria-label", "toggle mobile navigation menu");
  $(".Header-search-form-submit").attr("aria-label", "search");
</script>

 

@tcp13 Looks like that worked!! Thank you so much, I really appreciate it!