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

tcp13

Circle Member
  • Posts

    343
  • Joined

  • Last visited

  • Days Won

    5

tcp13 last won the day on August 10 2020

tcp13 had the most liked content!

3 Followers

Personal Information

Recent Profile Visitors

1,270 profile views
  1. @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
  2. 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.
  3. 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
  4. 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
  5. 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
  6. @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
  7. 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.
  8. 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 😉
  9. Hey @queerterpreter, I posted some custom code to add a skip link in a similar thread: Hope this helps! -Tyler
  10. 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
  11. 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
  12. Hey @StarBytes, Still having trouble with this? It's hard to guess without a link, but you may need to append !important; to your CSS rules like so: .gallery-item-description { font-size: 2rem !important; color: #fff !important; } And of the top of my head, it's possible you might instead need to target a descendant of the gallery description class: .gallery-item-description p { font-size: 2rem !important; color: #fff !important; } Hope this helps! -Tyler
  13. Hey @ch71579, Tyler here from SquareADA.com! Not sure about the SEO concerns or complex custom code mentioned in this tread, but to your original point about accessibility - the way it's setup is actually correct. If we dig into WCAG (that's the international standard on web accessibility), we see from Technique H30 that "When an image is the only content of a link, the text alternative for the image describes the unique function of the link." So in other words, for a summary block or grid of blog thumbnail images, it's more appropriate to describe the function of where that link goes (ie the name of the blog post) instead of a typical visual description of the image. Hope this helps! -Tyler PS - If you looking for additional assistance with WCAG and ADA compliance, check out this free accessibility audit tool.
  14. Hey there @northamrealty, It's actually a different target element for your template. Use the same code as above, but swap out this section with the following: <!--Skip Link--> <script> $(document).ready(function(){$("body").prepend('<a href="javascript:skipTrigger();" class="skip-link" tabindex="0">Skip to Content</a>');}); function skipTrigger(){$(".Index").attr("tabindex", "-1").focus();} </script> Hope this helps! -Tyler
  15. May 2021 EDIT: We recently published a blog post with free template-specific code snippets for almost every 7.0 template: https://squareada.com/resources/how-to-add-a-skip-link-to-your-squarespace-website-diy-guide --- Hey there @kyledavis726 and @JTheater, Skip links are built-in to all of the newer Squarespace templates running version 7.1, but if you're using a older template running version 7.0, you'll have to implement one with custom code. In the case of the Westlake site you linked, try adding the following into Settings > Advanced > Code Injection > Header Injection: <!--jQuery--> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <!--Skip Link--> <script> $(document).ready(function(){$("body").prepend('<a href="javascript:skipTrigger();" class="skip-link" tabindex="0">Skip to Content</a>');}); function skipTrigger(){$("#page").attr("tabindex", "-1").focus();} </script> <!--Skip Link Styles--> <style> .skip-link {position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;} .skip-link:focus {left:10px;top:10px;width:auto;height:auto;overflow:visible;background-color:#0f0f0f;color:#f0f0f0;size:1em;padding-top:0.5em;padding-bottom:0.5em;padding-left:1em;padding-right:1em;z-index: 99999;} </style> With this expected result when pressing the Tab key to navigate: Hope this helps! Of course, adding a skip link is only a small component of WCAG compliance. If you're looking for a more robust accessibility solution, be sure to checkout the free audit tool linked in my forum signature, or consider working with an accessibility specialist such as myself to develop a more comprehensive strategy for your site. Feel free to send me a DM if you need any further assistance with the skip link! -Tyler
×
×
  • Create New...