KickinGa Posted March 1, 2021 Share Posted March 1, 2021 Site URL: https://www.bondprosper.com/london-property-market Title says it all, How do you add Image Alt Text to Section Backgrounds? For example, on my London page, the first image is a background image of St Pauls Cathedral. https://www.bondprosper.com/london-property-market Link to comment
tuanphan Posted March 4, 2021 Share Posted March 4, 2021 You mean add alt text, or add a small text under background image? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
KickinGa Posted March 5, 2021 Author Share Posted March 5, 2021 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? CooksBay 1 Link to comment
herobirthservices Posted May 28, 2021 Share Posted May 28, 2021 I'm wondering the same thing regarding background images in blocks in 7.1. My colleague who uses a screen reader said there is absolutely no way to tell there is an image. This is an accessibility issue! Link to comment
creedon Posted May 28, 2021 Share Posted May 28, 2021 (edited) @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. 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 a company that makes accessibility software for SS sites if you need such software. Edited September 4, 2023 by creedon KickinGa and Kimmunic8 2 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
KickinGa Posted May 28, 2021 Author Share Posted May 28, 2021 I just don't understand why Squarespace haven't coded the platform to allow for this. Seems exclusive to those who use screen readers, and could also affect SEO. CooksBay 1 Link to comment
Solution tcp13 Posted May 29, 2021 Solution Share Posted May 29, 2021 (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. 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 Edited May 29, 2021 by tcp13 KickinGa, efranken, creedon and 1 other 3 1 The above post may be outdated. I’m no longer active in the Squarespace ecosystem, so I won’t see your direct messages. For better resources about web accessibility, I’ve documented some of my thoughts on my forum profile. Link to comment
noekhalfa Posted July 26, 2022 Share Posted July 26, 2022 Hey Squarespace team, I'd like to bring this back to visibility. Can we get a spot to add alt text to our background images? When I do a spider crawl of my page it's showing this result for the background image ErinMurphy 1 Link to comment
StephenBD Posted January 3, 2023 Share Posted January 3, 2023 Most of the template designs encourage the use of striking images, even when they are backgrounds, and often they will contain pertinent graphic information. I agree there should be an alt text option for these. Kimmunic8 1 Link to comment
juliaprather Posted February 18, 2023 Share Posted February 18, 2023 Making another request that background images be given the option for alt text. As @tcp13 mentioned, there may be a null alt tag assigned to background images which makes them technically compliant, but they still get caught by accessibility scanners. Clients in industries which tend to be concerned with compliance do not understand this. Kimmunic8 1 Link to comment
Philhu Posted March 2, 2023 Share Posted March 2, 2023 Count me in as a "bumper" for this topic. Link to comment
M_Fancy_Sites Posted March 16, 2023 Share Posted March 16, 2023 Bumping this topic. Accessibility is important, especially when we promote such visual-heavy templates! Kimmunic8 1 Link to comment
ron1cne Posted July 16, 2023 Share Posted July 16, 2023 I'd like to ad my concern about the lack of ability to assign alt text to images all over Squarespace 7.1. We are unable to add alt text to images to a featured blog post image, inside a gallery, or page section backgrounds. Not giving us the option to ad alt text to these specific images is strange or an oversight and I am unable to conclude an good reasoning why we should be limited in this way. If an image needs an "null" assignment we should have the ability to make that choice. Loading jquery to make the change is an overly complicated and resource intensive way to make such a simple change; and, will ultimately negatively impact the loading speed of the page or search engine ranking of the site. Kimmunic8 1 Link to comment
CraigAds Posted July 17, 2023 Share Posted July 17, 2023 (edited) I agree with the past posters on this thread. Alt Tags are a fundamental part of SEO and not giving us the ability to edit this in all places feels like I'm walking around without wearing a sock. I can still walk, but it's awkward... Edited July 17, 2023 by CraigAds Link to comment
KB2020 Posted July 18, 2023 Share Posted July 18, 2023 I have just come across this post after searching the web for an answer, would really appreciate an option to add alt text both on an accessibility and seo front. Bumping! Kimmunic8 1 Link to comment
Fat_Bird_Creative Posted July 19, 2023 Share Posted July 19, 2023 I too have just come across this issue. Bump Kimmunic8 1 Link to comment
AnnaDesignsCo Posted July 25, 2023 Share Posted July 25, 2023 Joining this discussion. I would also like an easy way to add alt text to background images. Kimmunic8 1 Link to comment
Phyllis Posted July 30, 2023 Share Posted July 30, 2023 Same here! I would like to add alt text to my background images. Is there a work around though? Kimmunic8 1 Link to comment
ChargedCCTV Posted August 1, 2023 Share Posted August 1, 2023 bumping this also as its one of the few SEO errors i get flag up using HIKESEO and i cant get rid of them. Kimmunic8 1 Link to comment
dstyes Posted August 4, 2023 Share Posted August 4, 2023 Same here. Adding my two cents to the discussion. Should be able to add alt text to background images, just like with regular images. @Squarespace please add to your next update. Kimmunic8 1 Link to comment
Frangipani Posted August 9, 2023 Share Posted August 9, 2023 Agree - please add the option Kimmunic8 1 Link to comment
Blue_Sky Posted August 17, 2023 Share Posted August 17, 2023 If I'm using an image as a background in a specific section of my website, how can add an alt-text? What are the best practices for implementing alt-text for background images to enhance SEO and accessibility? Link to comment
tuanphan Posted August 21, 2023 Share Posted August 21, 2023 I guess we need to use code to add alt to section background image. If you still need, please share link to page where you added image + Let me know which text, we can give code Blue_Sky 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Kimmunic8 Posted September 4, 2023 Share Posted September 4, 2023 Agree came across the same issue today. M_Fancy_Sites 1 Link to comment
Aurora Posted September 13, 2023 Share Posted September 13, 2023 I agree, I would like to be able to add alt text to my background images for greater accessibility. M_Fancy_Sites 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment