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

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

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

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

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

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 1 year later...

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

Mobile menu.jpg

Search Button.jpg

Edited by mirandakelton
Link to comment
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>

 

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

Link to comment
  • 2 weeks later...

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

Edited by tcp13

The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile.

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

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.