Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Posts

  • Joined

  • Last visited

  • Days Won


tcp13 last won the day on October 22

tcp13 had the most liked content!


Personal Information

Recent Profile Visitors

1,511 profile views
  1. 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
  2. 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
  3. @jenthomson, try disabling "Ajax Loading" within site styles. See here: https://sf.digital/squarespace-solutions/why-doesnt-my-code-work-until-i-refresh-the-page
  4. Do you have any experience fixing page break when printing? Currently a blog site I am working on cuts a line between two pages in some cases. Example below. 

    I used your formatting code from another post. 

    website is: themultidisciplinarycoach.squarespace.com

    Screen Shot 2021-09-07 at 2.48.13 PM.png

  5. @Kurt12345678 Try adding the following within Settings > Advanced > Code Injection: <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <!-- Accessible Mobile Navigation - Five Template --> <script> // assign role=button so screen readers announce the label as a button $("#mobile-navigation-label").attr("role", "button"); // assign an aria-label as an invisible screen reader label so the button isn't empty $("#mobile-navigation-label").attr("aria-label", "toggle mobile navigation menu"); // add tabindex value so button is focusable by keyboard navigation $("#mobile-navigation-label").attr("tabindex", "0"); // add event listener so button can be triggered by pressing enter or space keys $("#mobile-navigation-label").keyup(function(event) { event.preventDefault(); if (event.keyCode == 13 || event.keyCode == 32) { document.activeElement.click(); } }); </script> With this expected result using exclusively keyboard navigation: This code is based on the standardized WAI-ARIA design pattern for a button: https://www.w3.org/TR/wai-aria-practices/#button You cited WCAG Success Criterion 3.2.1, but I don't think that's applicable here (it prohibits a change of context, such as if focusing the button caused the menu to automatically open without pressing enter). More pertinent are 2.1.1 and 4.1.2 😎 Regardless though, good on ya for being proactive about accessibility! Hope this helps! -Tyler
  6. Hi @Kurt12345678, Can you post or DM me a link to your site? We've got some free code in the bonus section of this article for desktop dropdown navigation accessibility, but the fix for mobile depends on which template you're using.
  7. Hey hey! I'm a certified Web Accessibility Specialist and the founder of Square ADA. Great question @KickinGa! WCAG (the golden standard of web accessibility) actually states in SC 1.1.1 that if an image is "pure decoration" or "used only for visual formatting," then it should be "implemented in a way that it can be ignored by assistive technology." Translation - If the image isn't communicating any meaningful information, then we assign a null alt attribute to tell screen readers it's okay to skip the image (WCAG Technique H67). When used correctly, null alt text provides a better experience, since blind folks typically don't care about every little decorative icon or scenic background photo when trying to find information on your site. In the case of the 7.1 site you linked (and @herobirthservices mentioned), the null alt tag is already assigned by Squarespace on all background images. So from an accessibility standpoint, this is technically compliant. However, if there's meaningful content in the background image that needed to be assigned alt text (such as using an image of text), you could use custom code to override the default null value: <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <!-- Override Alt Text Value --> <script> $(document).ready(function(){ $("section[data-section-id='5f5726f0974f98058a7f632f'] .section-background img").attr("alt", "Lorem Ipsum"); }); </script> Hope this helps! -Tyler
  8. 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
  9. Hi @rTraction, Tyler here from SquareADA.com. Sounds like you're using a Bedford-family template! We have a couple blog posts with free code snippets that might help: Skip Link Guide: https://squareada.com/resources/how-to-add-a-skip-link-to-your-squarespace-website-diy-guide Focus Indicator and Subnav Visibility Guide: https://squareada.com/resources/how-to-add-a-focus-indicator-to-your-squarespace-website-diy-guide We also have a free accessibility audit tool, and if you're looking for a more robust solution, we're available for hire via our done-for-you accessibility service. Feel free to send us an email or DM me with any other accessibility questions. Hope this helps! -Tyler
  10. @ConradH Try adding this in Design > Custom CSS: @media only screen and (max-width: 768px) { a.sqs-block-button-element[href="javascript:window.print();"]{display:none!important;} } With this expected result: Hope this helps, -Tyler
  11. Ah, sorry about that @northamrealty! It appears your homepage has a different selector since it's an Index Page. Try modifying it one more time to target .Content-outer instead of .Index <!--Skip Link--> <script> $(document).ready(function(){$("body").prepend('<a href="javascript:skipTrigger();" class="skip-link" tabindex="0">Skip to Content</a>');}); function skipTrigger(){$(".Content-outer").attr("tabindex", "-1").focus();} </script> That should work on every page within your template (include the homepage too). Feel free to DM me if you encounter any other issues.
  12. Hey there @melbeestudio and @queerterpreter, Skip links are built-it to the newer 7.1 templates, but you have to add them with custom code for the older 7.0 templates. I posted a few different template-specific solutions in another thread here: Hope this helps! Feel free to send me a DM if you need further assistance. -Tyler PS - For whatever it's worth, I've written here about why Userway is a poor approach to accessibility. Sure, it adds a skip link, but the button is super ugly and it does very little to actually improve the user experience for people with disabilities 😉
  13. Hey @queerterpreter, I posted some custom code to add a skip link in a similar thread: Hope this helps! -Tyler
  14. Hey @GreggP, Lighthouse appears to be flagging the empty aria-labels on the social icons in your site footer. This has been a known issue on all Squarespace sites for quite some time. For a blind person using a screen reader (software that audibly announces the contents of the page), the purpose of these linked icons would be unclear. One way to fix this would be to replace the icons with linked text, as is suggested by Squarespace's accessibility guide here: That's a pretty lame solution though, so if you wanted to fix the existing icons, you could add correct aria-labels using custom code. Try adding this within Settings > Advanced > Code Injection > Footer Injection: <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <!-- Add aria-label Attributes to Social Icons --> <script> $(document).ready(function() { $("a.linkedin-unauth").attr("aria-label", "LinkedIn"); $("a.facebook-unauth").attr("aria-label", "Facebook"); $("a.instagram-unauth").attr("aria-label", "Instagram"); }); </script> With this expected result: If you're looking for further accessibility assistance, feel free to send me a DM or check out our resources at SquareADA.com. Our custom code is often able to minimize or entirely fix the issues identified by Lighthouse and other accessibility audit tools: Hope this helps! -Tyler
  15. Hey @CH1, What kind of "text to speech" program are you using? Screen readers (which visually impaired people use to announce site content), such as the widely-used JAWS, should be able to announce text without needing to use tab navigation. Adding a tabindex value is more applicable for buttons, links, and other interactive elements that a keyboard navigation user would use the tab key to access. If you're looking for additional accessibility help, feel free to send me a DM or check out the free accessibility audit tool linked in my signature below. Hope this helps! -Tyler
  • Create New...