Jump to content

tcp13

Circle Member
  • Posts

    388
  • Joined

  • Last visited

  • Days Won

    6

Community Answers

  1. tcp13's post in How do you add Image Alt Text to Section Backgrounds? was marked as the answer   
    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
  2. tcp13's post in How can I get rid of the spacing so that "blog" and "contact" are in the same format as the first 3 listed?? was marked as the answer   
    Press Shift + Enter to bump down a single line, instead of just Enter to create a new paragraph.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.