Ancestors

Toot

Written by Stefan Bohacek on 2024-12-12 at 15:16

Folks who run their own site/blog, did you know that you can add alt text to the images that show up on social media when your articles are shared?

og:image:alt

twitter:image:alt

[#]AltText #accessibility #webdev

=> View attached media

=> More informations about this toot | More toots from stefan@stefanbohacek.online

Descendants

Written by Stefan Bohacek on 2024-12-13 at 16:01

Here's a full example of the necessary code on my blog.

https://stefanbohacek.com/blog/adding-alt-text-to-article-thumbnails-on-social-media/

=> More informations about this toot | More toots from stefan@stefanbohacek.online

Written by Anže :python: on 2024-12-12 at 15:22

@stefan I didn't not know this, thanks for sharing!

=> More informations about this toot | More toots from anze3db@fosstodon.org

Written by George Dinwiddie on 2024-12-12 at 15:43

@stefan

Why don't they use the AltText that's already on the image?

=> More informations about this toot | More toots from gdinwiddie@mastodon.social

Written by Stefan Bohacek on 2024-12-12 at 15:47

@gdinwiddie You typically set the image that's used on social media using the og:image or twitter:image meta tag, with an URL of the image.

It might be too much work to search for the same URL on the page and see if it has an alt text, but it can also be an image that does not appear on the page itself.

This might work if you check for alt text embedded in the image metadata, but this is not widely used.

=> More informations about this toot | More toots from stefan@stefanbohacek.online

Written by LiteralGrill on 2024-12-12 at 15:54

@stefan I didn't know actually, so thank you for sharing!

=> More informations about this toot | More toots from literalgrill@sakurajima.moe

Written by Stefan Bohacek on 2024-12-12 at 15:57

@literalgrill My pleasure!

=> More informations about this toot | More toots from stefan@stefanbohacek.online

Written by DJM (freelance for hire) on 2024-12-12 at 16:13

@stefan Some food for thought...

https://yoast.com/developer-blog/why-we-dont-set-the-og-image-alt-tag/

W3C Alt Decision Tree: https://www.w3.org/WAI/tutorials/images/decision-tree/

=> More informations about this toot | More toots from cybeardjm@masto.ai

Written by Stefan Bohacek on 2024-12-12 at 16:17

@cybeardjm Yes, saw this, and I am not too sure I fully understand.

"managing the og:image:alt tag is more of a job for Facebook (and other platforms that uses it)"

Why would Facebook describe the contents of the image you are posting online? How would this even work?

Maybe it would make sense if there was an extra field for image description when you're posting a link to an article, but if you don't control the site, you won't know when the image changes.

Maybe I'm missing something?

=> More informations about this toot | More toots from stefan@stefanbohacek.online

Written by Stefan Bohacek on 2024-12-12 at 16:23

@cybeardjm And I get that some images may be "decorative", but does that automatically apply to all article image thumbnails?

=> More informations about this toot | More toots from stefan@stefanbohacek.online

Written by Nicd on 2024-12-12 at 18:39

@stefan Thanks! Will surely add this to my blog. :)

=> More informations about this toot | More toots from nicd@masto.ahlcode.fi

Written by Stefan Bohacek on 2024-12-12 at 18:41

@nicd Nice! No problem!

=> More informations about this toot | More toots from stefan@stefanbohacek.online

Written by Nicd on 2024-12-12 at 20:14

@stefan https://git.ahlcode.fi/nicd/scriptorium/commit/2239bbf5f0dbf1ae3b9560aebf9398ea40eea69d 👍 Just need to release a new version and deploy it when I have a moment.

=> More informations about this toot | More toots from nicd@masto.ahlcode.fi