Jump to content

Showing File Names acting as Alt Text on your website

Recommended Posts

Hello all, I'd appreciate some help with Squarespace 7.1.

I've created sections which are images on my website, only to discover that I'm unable to put alt-text on them. On digging around on Squarespace support, the attached tells me that file names can be utilised as alt text. My question is, how can you get file names on images to be visible on your website? I don't seem to be able to see the file names. Am I missing something? 

Help gratefully received! 

squarespace.jpg

Link to comment
On 2/2/2023 at 11:21 AM, crak said:

I've created sections which are images on my website, only to discover that I'm unable to put alt-text on them. On digging around on Squarespace support, the attached tells me that file names can be utilised as alt text.

Please raise this as a feature request directly with Squarespace Customer Care. The advice in that support article is incorrect. 🤔

Squarespace does not add alt text to section backgrounds (see below):

image.png.0a6c1feeec96ec550504825add38cbc1.png

In most cases this is not surprising because, for accessibility reasons, it is not ideal to use background images "as the sole method of conveying important information". There isn't currently a feature that adds the filename as alt text when section backgrounds do require it. 

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009
Updated to confirm that this is not a feature

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
  • 7 months later...
On 2/2/2023 at 1:08 PM, paul2009 said:

Please raise this directly with Squarespace Customer Care, as I'm not sure the advice in that support article is correct. 🤔

In my experience, Squarespace does not add alt text to section backgrounds (see below):

image.png.0a6c1feeec96ec550504825add38cbc1.png

In most cases this is not surprising because, for accessibility reasons, it is not ideal to use background images "as the sole method of conveying important information" (WCAG F3). However, I'm not aware of a functioning feature that adds the filename as alt text when section backgrounds do require it.

If Customer Care tell you anything different, please share what they tell you 🙂

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul,

I came across the same issue of wanting to add an alt text to a background image that I'm using above the fold and not being able to find a way to do so. It struck me that you said that using background images is not ideal for accessibility, and I'm wondering if you could say a bit more about that? It's important to me to learn how to make my site as accessible as possible. What would you recommend I do instead? I would like for the image to be immersive when landing on my site, which is why I chose the background image option.

Thank you!

Link to comment
On 9/13/2023 at 9:55 AM, Aurora said:

I came across the same issue of wanting to add an alt text to a background image that I'm using above the fold and not being able to find a way to do so. It struck me that you said that using background images is not ideal for accessibility, and I'm wondering if you could say a bit more about that?

I'm not an expert on accessibility but my best advice is to try to avoid presenting important information in a background image.

If the content of the image is important to convey your message then I recommend placing it in an Image Block, where you can add descriptive alternate ("alt") text to make the image content accessible to everyone.

Personally, I'd like to include alternate text on all images - even "ambient" images - as a courtesy to screen reader users. They may have disabled background images to increase the contrast of the text but many would still like to know about the background image. Unfortunately, this isn't currently possible for background images on Squarespace - at least not without writing some custom JavaScript.

Note that the support article mentioned above (suggesting the filename can be used) is incorrect, and is on the waitlist to be corrected.

Did this help? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
1 hour ago, paul2009 said:

I'm not an expert on accessibility but my best advice is to try to avoid presenting important information in a background image.

If the content of the image is important to convey your message then I recommend placing it in an Image Block, where you can add descriptive alternate ("alt") text to make the image content accessible to everyone.

Personally, I'd like to include alternate text on all images - even "ambient" images - as a courtesy to screen reader users. They may have disabled background images to increase the contrast of the text but many would still like to know about the background image. Unfortunately, this isn't currently possible for background images on Squarespace - at least not without writing some custom JavaScript.

Note that the support article mentioned above (suggesting the filename can be used) is incorrect, and is on the waitlist to be corrected.

Did this help? Please give feedback by clicking an icon below  ⬇️

Thanks! I appreciate your thoughts. I agree, I want my readers to be able to perceive all images on my site. On the other hand, I really like the immersive look of a background image that covers the whole screen width, especially above the fold.

I contacted Squarespace about this issue and was told by two agents that a screen reader would read out the file name for a background image. Can you confirm that this is incorrect?

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

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.