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

Thumbnail Images Custom ALT Text


ch71579

Question

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.

Edited by ch71579
Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 captio

4 answers to this question

Recommended Posts

  • 0

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 post
  • 0
 

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 post
  • 0
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.

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 post

Create an account or sign in to comment

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


×
×
  • Create New...