How to add gallery alt text to images?

Developer help
#1

Is there a way to add image alt text to galleries? Google’s accessibility requirements and SEO hate it when images don’t have alt text, and I can’t find a way to add alt text to any images in a gallery.

1 Like
#2

Hey @eidolem :wave:.
It’s possible to add captions to image galleries by using the field that appears under a gallery when it’s selected. I don’t think it’s a huge problem in terms of SEO, however I do understand your concerns with accessibility. I did a little research into this: https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html

It’s appears that some screen readers don’t announce the gallery container with the caption within it. A little JavaScript can help us improve this:

[...document.querySelectorAll('figure.kg-gallery-card.kg-card-hascaption')].map(gallery => {
	gallery.setAttribute('role', 'figure')
	gallery.setAttribute('aria-label', gallery.querySelector('figcaption').innerHTML)
});

This code will add a role of figure to every gallery and use the containing caption to label the gallery :slight_smile:

1 Like
#3

This should really be in the editor. Alt text is absolutely important for SEO for image search.

1 Like
#4

Can I ask why you want to improve SEO with just images? :slight_smile:

You could upload them as regular images, that way you’d get to add alt text as well as a caption

#5

I’d prefer to improve SEO every way possible.

Alt text is required for accessibility and used by search engines to give context and include them in searches.

Image search has increased traction with Google and is a good source of clicks from searches.

2 Likes
#6

I will respond in support of @eidolem & @tippingpints request here.

Every image should have its own alt tag. This is a core concept of Google’s SEO standards.

Alt text (text that describes an image) improves accessibility for people who can’t see images on web pages, including users who use screen readers or have low-bandwidth connections.

Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image. Also, alt text in images is useful as anchor text if you decide to use an image as a link.
https://support.google.com/webmasters/answer/114016?hl=en

Further, Google’s John Muller has explicitly stated the importance of including alt tags for images for some time now:

Beyond the confirmed SEO importance, it also is an accessibility issue for those with visual impairment who rely upon alt tags for navigating the web via screen readers or other tools.

1 Like
Fancybox integration in ghost3
#7

@Eric_Morgan Thanks for the detailed backup.

Would also be great to add the schema.org info for images and galleries.

Ghost does a great job on the article pages but only for the featured image.
https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fghost.org%2Fblog%2Fhow-to-make-money-blogging%2F

2 Likes
#8

If you drag images out of a gallery then you can set their alt text then drag the images back into the gallery, the alt text will be kept.

3 Likes
#9

I tried this. The alt texts are kept but it also breaks the gallery formatting.

Here’s a screenshot of what I see in the editor vs the published article.