Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

How do you add Image Alt Text to Section Backgrounds?


Recommended Posts

20 hours ago, tuanphan said:

You mean add alt text, or add a small text under background image?

I mean add Alt text to the background image.  There's nowhere in the settings to add the text unlike with normal image settinds.  Is it possible to code the alt text to the image in the custom CSS?

Link to comment
  • 2 months later...

@herobirthservices

You mention both background and block images.

Image blocks do have an optional file name that can be set which translates to the alt text.

1961583062_ScreenShot2021-05-27at7_18_57PM.thumb.png.6ae2b07a0c457cf2cdcc4b0b2eacbb6c.png

 

870443308_ScreenShot2021-05-27at7_20_43PM.png.75d1221e7e6ed902b9d913ef8565bbcc.png

 

It does appear that background images for sections do not get an alt text. At the very least they could add the file name in alt text. Even better would be to add the optional file name field to the background image settings dialog.

FYI @tcp13 works for an company that makes accessibility software for SS sites if you need such software.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
Posted (edited)
On 5/27/2021 at 8:34 PM, creedon said:

FYI @tcp13 works for an company that makes accessibility software for SS sites if you need such software.

giphy.webp

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.

image.thumb.png.b8ad1cc4f37d505e6e99edc02a66973e.png

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

Edited by tcp13

There were 3550 lawsuits last year against websites that were inaccessible to people with disabilities. Is your Squarespace site ADA compliant? Find out in 60 seconds with our free accessibility audit

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...