tcp13

@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

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.

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

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

@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

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.

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 😉

Hey @queerterpreter, I posted some custom code to add a skip link in a similar thread: Hope this helps! -Tyler

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

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

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

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.

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

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

You're close, @ConradH! Try targeting the img itself instead of its parent anchor element: /*change logo img src*/ .header-title-logo img { content: url('https://images.squarespace-cdn.com/content/v1/5fa318d8aa276a66ec5322fb/1609611984060-SAYWOSH6ATQYL3QJ5SU7/ke17ZwdGBToddI8pDm48kLkAmGt-nEc-KDyOz6MyEdx7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0slJ0ZK8bhnMvwBc9-o9uiV5bJKIkPq_14eERHvCXjNC_RY8ahIp3NZpEzceY_TM9w/Logo+Grey+V+Transparent.png') !important; } If we then remove the teal background, you're left with the new grey logo (which still appears at the top of each page). To make it appear on only the first page, add this line of CSS: /*logo on only first page*/ #header,.header-inner { position:absolute !important; } With this expected result: Hope this helps! -Tyler

Hi @ConradH, I can't seem to find a way to reduce the page title sizing, but replacing your existing CSS with the following should keep the logo visible: /*PRINT FORMATTING*/ @media print { /*hide excess stuff*/ #footer, .sqs-block-button-container--left, #footer-sections { display: none !important; } /*hide nav bar*/ .header-nav, .header-actions { display: none !important; } /*add background color to logo since transparent on white is no bueno*/ #header, .header-inner{ background-color:#a6bdba!important; -webkit-print-color-adjust: exact !important; } /*hide link urls*/ a::after { content: "" !important; } /*ensure no page margin*/ #page { margin: 0px !important; } } With this expected result: Hope this helps! -Tyler

Sure thing @JSM - can you post a link to your site (and a page password if it's private)?

Hi @northamrealty, It appears I posted the code for Brine with a screenshot of Bedford, so I'll assume that's an 11-month-old mistake on my part 🤦‍♂️ For your site, try adding the following within Design > Custom CSS: .Header-nav-folder:focus-within { opacity:1!important; display:block!important; visibility:visible!important; left:0px!important; } With this expected result: Hope this helps! If you're looking for a more substantial accessibility effort, checkout our free audit tool, which found 27 accessibility errors on your homepage 🙂 Feel free to send me a message if we can help with anything else. -Tyler

Hey @jq_, That appears to be the mobile header that's showing, since the print preview is below your template's mobile breakpoint. Try adding the .Mobile-bar selector into your CSS like so: @media print { .Header-inner, .Mobile-bar { display:none!important; } } With this expected result: Hope this helps! -Tyler

Hi @Twil, Are you trying to change the text color itself? It really depends on which specific page. For the Impact page you linked, it'd be something like this pasted into Design > Custom CSS: #block-yui_3_17_2_13_1457552603071_12467 h1 { color:#0f0f0f !important; } You can customize the hex color value to your liking, although I'd recommend something other than fuchsia 😉 Hope this helps! -Tyler

Hi @LaurenJoy, Try adding this code within Design > Custom CSS: .products article.ProductItem{padding-bottom:0px;padding-top:50px;} @media only screen and (min-width: 769px) { .products article.ProductItem{margin-bottom:-200px;} } This should reduce the spacing for all your product pages in one go (and hopefully without affecting any other pages): Hope this helps! -Tyler P.S. - here's something extra if you want to remove that scrollbar on your product gallery 😉 .ProductItem-gallery-thumbnails{overflow-x:auto!important;}

Hi @judith1570048218, You can target them individually by their additional classes. So for example, try adding this code within Design > Custom CSS: /*This targets any elements with BOTH the .product-mark and .sold-out classes.*/ .product-mark.sold-out{background-color:#A40000!important;} With this expected result: Presumably, there'd be a comparable class for products on sale, likely .sale or .on-sale, but I can't find anything currently on sale within your site. Hope this helps! -Tyler

Hi @gmgarrison, You should be able to accomplish this with jQuery. Try adding the following within Settings > Advanced > Code Injection > Footer Injection: <!-- If you don't already have jQuery, install it here. --> <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script> <script> /*This moves the final item of your primary navigation to the Header Actions parent element.*/ $(".header-nav-list").find("a").last().prependTo(".header-actions-action"); /*Same, but for mobile.*/ $(".header-menu-nav-folder-content").find("a").last().prependTo(".header-menu-cta"); /*This changes the element's classes to match the other button.*/ $(".header-actions-action a:first-child").addClass("btn btn--border theme-btn--primary-inverse"); /*Same, but for mobile.*/ $(".header-menu-cta a:first-child").addClass("theme-btn--primary btn"); </script> <style> /*This further tweaks the styles to force the buttons onto separate lines.*/ .header-actions-action a:first-child{display:block!important; margin-bottom:10px!important;} /*This hides the original nav item.*/ .header-nav-list div:last-child a{display:none!important;} </style> This code essentially transforms whatever the last link is in your primary navigation into an orange button. Here's the expected result on desktop: And here's the expected result on mobile: If the stacked layout is too large, you can add additional CSS to decrease the size: <style> .header-actions-action a{font-size:.7rem!important;} /*Same, but for mobile.*/ .header-menu-cta a{font-size:.7rem!important;} </style> Perhaps a bit overengineered, but it gets the job done 😀 Hope this helps! -Tyler

Hi @clary, Yup - you guessed it! Here's the error showing in Chrome console: You should be able to simply change the http to https, since the page you're embedding appears to already support it: <div style="border: 0px solid #D5CC5A; overflow: hidden;"> <iframe style="border: 0px none; margin-top: -85px; height: 985px; width: 100%;" src="https://bmpdatabase.org/tools/stats_map/v2/#/map?owner=bmpdatabase" scrolling="no"> </iframe> </div> With this expected result: Hope this helps! -Tyler