Jump to content

Thumbnail Images Custom ALT Text

Recommended Posts

I am creating a custom site on the developer platform, and my client requires that I meet web accessibility guidelines for blind users. To do this, I need to be able to add descriptive ALT text to all images. The one place where this is an issue is on blog post thumbnail images. By default, Squarespace uses the title of the blog post as the ALT text for the image, but this makes absolutely no sense and certainly doesn't do any good for a blind user. It's actually very surprising that they didn't just add a simple field for this.

Does anyone know of any workaround, custom code, or plugin that will allow me to add proper ALT text to post thumbnail images?

Thanks.

Link to comment
  • Replies 5
  • Views 1.8k
  • Created
  • Last Reply
  • 5 months later...

Squarespace seems to have no direct access adding image alt tags.

It seems SEO for images takes place with image-file-titles, titles and captions. I have read that these replace the image alt tags.... Not sure how.

Maybe they figure the more other SEO options we use the less we need image alt tags. I prefer be able to use ALL SEO options. 

My questions are;

  • Why would Squarespace not give you direct access to alt tags? 
  • Which is more SEO relevant Alt, Title, Caption or File-title?
  • As way around this problem, wouldn't be better to hand code images with alt tags then to go through using the image block widget for adding images to the website?

@ch71579  ,

Maybe a work around is to use the "Code Block"  and hand code the <img> to add an ALT Tag manually.   This defeats the purpose of using an "Upload Image"  Widget but you can at least gain access to proper SEO practices. 

I tried this with an image and I haven't seen any problems yet, but it is tedious and I got a Squarespace web site so I wouldn't do much coding.  

It really is kind of an inconvenience that direct ALT tag access is not a choice since the point of a website is to be found on the internet.

Good Luck ch71579, let me what you find. 

Link to comment
 

It is necessary to set an alt value for all of your images, in case a browser can not load the image or the visitor is using screen reader. You have two options. Either use the featured image's caption (which can some times be blank) or use the post's title as alt.

You can get the caption by using get_post_meta(). Using it is as simple as this:

$alt = get_post_meta ( $image_id, '_wp_attachment_image_alt', true );
echo '<img alt="' . esc_html ( $alt ) . '" src="URL HERE" />';

It should be used in the loop though, or be passed the $post object or ID.

The alternative method is to use post's title as alt text. To do so, you can use:

echo '<img alt="' . esc_html ( get_the_title() ) . '" src="URL HERE" />';

You can set up a conditional and check if the thumbnail has a caption, and use it instead of post title, if available:

if ( $alt = get_the_post_thumbnail_caption() ) {
    // Nothing to do here
} else {
    $alt = get_the_title();
}

echo '<img alt="' . esc_html ( $alt ) . '" src="URL HERE"/>

UPDATE

If you wish to add the alt attribute directly to get_post_thumbnail(), you can pass it as an array to the function:

the_post_thumbnail( 'thumbnail', [ 'alt' => esc_html ( get_the_title() ) ] ); 
Link to comment
  • 5 weeks later...
On 7/21/2020 at 11:25 AM, ch71579 said:

By default, Squarespace uses the title of the blog post as the ALT text for the image, but this makes absolutely no sense and certainly doesn't do any good for a blind user.

Hey @ch71579,

Tyler here from SquareADA.com! Not sure about the SEO concerns or complex custom code mentioned in this tread, but to your original point about accessibility - the way it's setup is actually correct.

If we dig into WCAG (that's the international standard on web accessibility), we see from Technique H30 that "When an image is the only content of a link, the text alternative for the image describes the unique function of the link."

So in other words, for a summary block or grid of blog thumbnail images, it's more appropriate to describe the function of where that link goes (ie the name of the blog post) instead of a typical visual description of the image.

Hope this helps!
-Tyler

PS - If you looking for additional assistance with WCAG and ADA compliance, check out this free accessibility audit tool.

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
  • 3 months later...

Archived

This topic is now archived and is closed to further replies.

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