KriBa Posted February 25, 2021 Share Posted February 25, 2021 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 Link to comment
tcp13 Posted May 12, 2021 Share Posted May 12, 2021 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 tuanphan 1 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 Posted October 11, 2021 Share Posted October 11, 2021 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? Link to comment
tuanphan Posted October 13, 2021 Share Posted October 13, 2021 @jenthomson Can you share link to search page on your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tcp13 Posted October 13, 2021 Share Posted October 13, 2021 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 tuanphan 1 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 Posted October 19, 2021 Share Posted October 19, 2021 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 Link to comment
tcp13 Posted October 19, 2021 Share Posted October 19, 2021 (edited) 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 October 19, 2021 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
creedon Posted October 20, 2021 Share Posted October 20, 2021 @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 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment