tcp13

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

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>

Hey @simon.stjohn, Instead of pasting your code into the Custom CSS area (which applies it sitewide to every page), open up the page settings (cogwheel icon). Under "Advanced", you can paste the code into the Page Header Code Injection which only applies to that page. This injection expects HTML, so if you're pasting in CSS, you'll need to wrap it in <style> tags like so: <style> /* PASTE YOUR CSS CODE HERE */ </style> Hope this helps! -Tyler

@Phiso - try adding this at Design > Custom CSS: .page-section:first-of-type .content-wrapper{padding-top:3vmax!important;} You can increase or decrease the "3" value to your liking. Hope this helps! -Tyler

@Phiso - you'll also need to make the site "public" or "password protected" from Settings > Site Availability. Otherwise, we still can't access the "private" site to take a look at your header spacing 🙂

@Phiso, can you share a link to your site?

Ah. Try this then: .page-section[data-section-id="625726cc3a16c8026eec4ae7"] .content-wrapper { padding-bottom: 0px !important; } Otherwise, you can try cropping the image. The remaining space is just transparency from the png.

Looks pretty good as is on my screen, but you could tweak it further with this code: .page-section[data-section-id="625726cc3a16c8026eec4ae7"] { padding-top: 70px !important; } Hope this helps! -Tyler

Hi @HG-Design, You have an empty product navigation bar that's taking up some extra space on all your store pages. You can remove it by adding the following CSS from Design > Custom CSS: .ProductItem-nav { display: none !important; } If needed, you can shrink the page's padding a bit further by adding the following CSS and modifying the number value: .product-layout-side-by-side { padding-top: 2vw !important; } Hope this helps! -Tyler

Hi @Hannah96, Sure thing - I'd be happy to take a look. Can you comment or DM me a link to your site? If your referencing the visibility of dropdown folders, that's a slightly different issue. We've got some free code snippets for that here: https://squareada.com/resources/how-to-add-a-focus-indicator-to-your-squarespace-website-diy-guide#:~:text=Bonus%3A Fix Dropdown Navigation Visibility -Tyler

Press Shift + Enter to bump down a single line, instead of just Enter to create a new paragraph.

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

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

@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

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