ch71579 Posted July 21, 2020 Share Posted July 21, 2020 (edited) 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 July 21, 2020 by ch71579 Link to comment
tuanphan Posted July 22, 2020 Share Posted July 22, 2020 Hi. Have you solved it yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
katphood Posted December 31, 2020 Share Posted December 31, 2020 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. JR7795 1 Link to comment
Guest Posted January 4, 2021 Share Posted January 4, 2021 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
tcp13 Posted February 3, 2021 Share Posted February 3, 2021 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. Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas. Link to comment
RicardoRMS Posted May 11, 2021 Share Posted May 11, 2021 I have labelled my files on my website page with alt text in the file name put a description and turned on add captions and google lighthouse is still saying that I don't have alt attributes for my thumbnails on my page? https://ricardomusic.studio/filmography 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