tcp13

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

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

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.

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

@tcp13
Thanks a lot Tyler! This is amazing!
You are wonderful!

Thank you @tcp13, that has worked perfectly!

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.

Hi. THe font file doesn't exist. Try copy font file url & paste to browser address bar. You will see

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

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

Hi @mathildeeeeee,
You may be able to add print functionality with a standard Squarespace button by setting the clickthrough URL to javascript:window.print(); - this just uses JS to open the browser's print dialog. Ensure it's not set to open in a new window.

 
You can also use @media print in CSS to create a printer-friendly format that works better with the built-in print dialog (Ctrl+P). Here's what worked well on my template (Tudor 7.0) - just add it within Design > Advanced > Custom CSS and tweak as needed:
@media print { /*resize the content*/ .blog-item-content-wrapper { width:100% !important; margin:0px !important; padding:0px !important; color: #000; background-color: #fff; } /*hide a bunch of extra stuff*/ #blogItemSidebarContent, .blog-item-actions, #header, #footer, #comments .header-controls, #comments .new-comment-area, .sqs-announcement-bar-dropzone, .sqs-frontend-overlay-editor-widget { display:none !important; } /*format the author profile*/ .blog-item-author-profile--sidebar { margin-top:500px !important; display:block !important; } /*remove weird link formatting*/ a::after { content: "" !important; } /*reduce page spacing*/ #page { margin:0px !important; } } Hope this helps!
-Tyler

Yes I discovered that anyone can sign in the hard way, creating a members area for survivors of assault to find that an abuser had become a member. 
So that was very quickly the end of that members area. 
In other words there is a safety issue fir other members if someone ‘off the street’ can simply join up. 

@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
 

@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
 

Please post publicly if you can because I'd like to learn about this issue. Others may as well.

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

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

Thank you so much for this code. I really, really appreciate it. 

@tcp13  It's been a little bit since I could get back to this project, but wanted to share some progress in case it helps anyone else. I was able to figure out a way to change the size of the title section:
/*header section height*/ section.page-section.section-height--small:not(.content-collection):not(.gallery-section):not(.user-items-list-section) { min-height: unset !important; height: 15vh !important; padding-top: 10vh !important; padding-bottom: 1vh !important; } I also needed to keep my blog excerpts from breaking onto the next page, and this did the trick:
/*prevent page breaks */ .summary-item {page-break-inside: avoid!important;} Here's the end result:

 
 
Do you know if there's a way to hide the Print button on mobile screens for multiple pages without targeting the block code for every individual button?

Again @tcp13, you rock! Thank you for all your help.

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

@tcp13 You're my hero! Thank you so much.