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: How do you figure? | scottohara.me

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.

2 Likes
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.
Image SEO Best Practices | Google Search Central  |  Documentation  |  Google for Developers

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.

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

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.

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

10

I would love to see this feature in the editor as well. The single image alt text feature is great, but I need to be able to do this with multiple images in a gallery.

11

Is there any news about this feature?

Alt tag are a must have to work on SEO, every basic SEO tool will tell you this…
It helps search engine know what the image is about and returns it in appropriate user image search.

I used to drag all the images out of the gallery one by one, add an alt text and drag it back in but since the last update it is not working anymore…
When the image is drag back in the gallery, the alt text is removed :frowning:

Does anyone have a workaround at least?

(Every JS script based solution is not working because search engines do not run JS when crwaling pages)

1 Like
12

Hi @prschulz

I am wondering if your team has any new about this feature?

Thanks in advance :pray:

13

Hi @rainbowour - Thanks for bumping this up. There hasn’t been any updates here, but I’ve added your request into our internal feedback tracking and will update this thread as soon as that changes.

Also, I just tested the workaround of dragging images with existing alt text into a gallery card, and that seems to be working fine. Is that not the case for you? It’s possible that it was a short-term issue during the launch of our new editor.

14

Thanks for your quick answer!

I did not tried the workaround lately, mainly because I did not have news about a fix so I tought it will not work and also because it is really long to do for each image.
I just tried and it works indeed.

It would be really great (and not so hard to develop?) to have an “alt” field for each image in a gallery that could be filled in directly.

Thanks again for your answer!

15

@prschulz another bump on this from my end as well, please :smiling_face:

I really think both Gallery Images and Header Images should have their Alt Text property edited directly from the editor, and since it really does matter for SEO and it seems to be an easy extra function, I think it should be given some priority — thank you!

1 Like
16

I’m also here to bump this. SEO has been mentioned several times already, and I don’t want to minimize the concern there. But really, alt text is a justice issue. Google’s search bot might be the most well-connected visually disabled visitor to my website, but I care more about supporting the human visitors with vision disabilities.

I’ll be frank, this is an embarrassing oversight and it could very well lead to legal risks for ADA compliance, as in Robles v. Domino’s Pizza. Please fix it!

5 Likes
17

Hmm. So I’ve tested this is by adding alt text to an image, dragging the image into a gallery, dragging it back out – and the alt text is not there. Can anyone verify this? Should I add it to the bugs category?

18

You’re right, looks like the alt text is preserved when dragging into the gallery but gets lost on the drag back out. A bug report on GitHub would be useful in case someone from the community wants to pick this up before the core team gets to it.

19

Thanks for your reply! So to clarify, the alt text is definitely still there if you add it to the image and then drag it into the gallery? (I’m not sure how to verify that.) The alt text is only being lost when the image is dragged back out of the gallery?

20

Correct. There are two ways to verify the alt text is still there after dragging an image into a gallery:

  1. Do that then preview/publish the post and on the rendered page inspect the image inside the gallery with your browser’s dev tools - you’ll see it has an alt text attribute set
  2. On the editor demo site you can open the “JSON output” view and perform the same process of adding alt text to an image and dragging it into a gallery - you’ll see the image object stored inside the gallery card has an alt text property

You can follow the same steps to verify the alt text gets lost after dragging the image out of the gallery again.

1 Like