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

Reputation Activity

  1. Like
    tcp13 reacted to Kurt12345678 in ADA compliance on Hamburger menu   
    Confirming the code worked as needed when added to the Footer block of Code Injection. Thanks @tcp13
  2. Like
    tcp13 got a reaction from paul2009 in ADA compliance on Hamburger menu   
    @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
     
  3. Like
    tcp13 got a reaction from creedon in ADA compliance on Hamburger menu   
    @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
     
  4. Like
    tcp13 reacted to creedon in ADA compliance on Hamburger menu   
    Please post publicly if you can because I'd like to learn about this issue. Others may as well.
  5. Like
    tcp13 got a reaction from KickinGa in How do you add Image Alt Text to Section Backgrounds?   
    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
  6. Like
    tcp13 got a reaction from creedon in How do you add Image Alt Text to Section Backgrounds?   
    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
  7. Love
    tcp13 got a reaction from tuanphan in Search bar is missing accessibility features   
    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
  8. Like
    tcp13 reacted to JTheater in Skip Link in Header for Web Content Accessibility Guidelines   
    Hi @tcp13,

    Thank you so much for this code. I really, really appreciate it. 
  9. Like
    tcp13 reacted to ConradH in Print page button?   
    @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?
  10. Like
    tcp13 reacted to northamrealty in Skip Link in Header for Web Content Accessibility Guidelines   
    Again @tcp13, you rock! Thank you for all your help.
  11. Like
    tcp13 got a reaction from northamrealty in Skip Link in Header for Web Content Accessibility Guidelines   
    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. Like
    tcp13 got a reaction from northamrealty in Skip Link in Header for Web Content Accessibility Guidelines   
    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
  13. Like
    tcp13 reacted to northamrealty in Skip Link in Header for Web Content Accessibility Guidelines   
    @tcp13 You're my hero! Thank you so much.
  14. Thanks
    tcp13 got a reaction from JSM in Print page button?   
    Sure thing @JSM - can you post a link to your site (and a page password if it's private)?
  15. Haha
    tcp13 reacted to creedon in Make Brine Folder Navigation Keyboard Accessible   
    LOL! I hate that when I go back over an old post and find mistakes. It happens far more often than I'd like! 😀
  16. Like
    tcp13 got a reaction from creedon in Make Brine Folder Navigation Keyboard Accessible   
    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
  17. Like
    tcp13 got a reaction from Sotiris in Reduce space between product details page and header   
    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;}
  18. Like
    tcp13 reacted to gmgarrison in Adding second button to site header   
    Thanks a lot for this. I can definitely work with this. Appreciate it!!!
  19. Like
    tcp13 got a reaction from tuanphan in Modifying SOLD OUT and SALE labels   
    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
  20. Like
    tcp13 reacted to Chloeberland in Changing the colour of number of pictures in a product carousel   
    @tcp13
    Thank you so much, worked like a charm! 

    Hope you have a lovely day, 
    Chloé
  21. Thanks
    tcp13 got a reaction from Chloeberland in Changing the colour of number of pictures in a product carousel   
    Hi @Chloeberland,
    Try adding this within Design > Custom CSS:
    .ProductItem-gallery-current-slide-indicator{color:black!important;} With this expected result on mobile:

    Hope this helps!
    -Tyler
  22. Love
    tcp13 reacted to clary in iframe Code Working In Edit Mode But Not When Published?   
    It worked! You are my new best friend.
     
    *sends drinks down bar to New Best Friend.
  23. Like
    tcp13 reacted to mathildeeeeee in Print page button?   
    @tcp13 Thank you for this! It works great 🙂
  24. Like
    tcp13 got a reaction from Twil in Mojave Change Overlay Text Color on One Page   
    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
  25. Like
    tcp13 reacted to judith1570048218 in Modifying SOLD OUT and SALE labels   
    @tcp13 Perfect. Exactly what I needed (and easier than I thought, can you tell I know nothing about coding). Thanks Tyler!
×
×
  • Create New...