YSK: How to embed images accessibly on Lemmy

Why YSK: If you want to make Lemmy a more accessible place for all, you need to know how to add labels (aka: “alt text”) to embedded images

As many of you are already aware, you can embed images in comments using the following markdown: ![](https://example.com/image.jpg).

That works, but the image will be left unlabeled which leaves screenreader users out of the conversation. This may seem like a theoretical problem, but it’s not – Lemmy already has an active blind community: rblind.com

So, here’s what you can do to add labels when embedding images:

![Earth viewed from the Moon](https://example.com/image.jpg)

That’s it! Any text within the [] becomes “alt text”, which is what screenreaders use for describing images. It’s a small thing, but it makes a world of difference.

Remember: Reddit took something from many of us here. For some, it was a mobile app. For others, it was the ability to operate their own communities. Comment with solidarity; use alt-text.

rbhfd,

Someone called me out on this yesterday. On a thread about rblind, so deservedly so. I had no idea this is how it works though. Thanks!

fastfinge,

That was me, and my bad. As a blind person myself, I’ve never tried to post an image. I knew including alt text was possible, but I didn’t realize the method was undocumented, and Lemmy doesn’t prompt for it. If I had, I would have offered help, not just snark.

rbhfd,

No worries! I never really considered blind people browsing apps, I only became aware of the technical details since the API changes at reddit, so it’s still far from a reflex to think about.

Thanks for pointing it out though.

rbhfd,

Follow up: did I do it correctly here?

lemmy.world/comment/766594

wit,

This is a really good YSK. Thank you for posting!

chaorace,
@chaorace@lemmy.sdf.org avatar

Unrelated question, but are you a Stormlight Archive reader? I ask because of your username lol

chaorace,
@chaorace@lemmy.sdf.org avatar

A soldier in the film Starship Troopers speaks directly to the viewer: “I’m doing my part!”

![A soldier in the film Starship Troopers speaks directly to the viewer: “I’m doing my part!”](https://i.kym-cdn.com/photos/images/newsfeed/002/182/171/eb0.jpg)

MostlyBlindGamer,
@MostlyBlindGamer@rblind.com avatar

This message is officially approved by RBlind. Thank you.

You are all making the open web a better place.

Elektrotechnik,

Very nice, thanks for the write up!

trouser_mouse,
@trouser_mouse@lemmy.world avatar

This is wonderful advice, it should be in all introduction material.

OtakuAltair,

Great YSK! Definitely doing this from now!

Pillarist,

I wish you could post gifs this way.

OtakuAltair, (edited )
Pillarist,

‼️ Last time I tried it, it wouldn’t work for me! Thank you!

Kraiden,

But the alt text still shows up?

or am I doing it wrong?

(If anyone with low vision is reading, the image is just a black question mark from wikimedia)

Not that it's an issue, I just thought it wasn't supposed to

mr47,

Because it's not alt text, it's literally a label. OP just declared that it's "aka alt text". The same syntax (just without the exclamation mark) works for links, and there the text in the square brackets is what's presented to the user, while the round brackets contain the URL. The exclamation mark just notifies the frontend that it's an image that should be embedded - but the text in the square brackets is still presented.

EgnlishPro,
raiun,

Lemmy should do it similar to how I have seen this done on Mastodon. When you upload an image an overlay shows up to remind the user to describe the image before submitting. The typical user is not going to remember to do this.

chaorace,
@chaorace@lemmy.sdf.org avatar

An excellent suggestion! I hope you don’t mind, but I went ahead and created a feature request for this just now: lemmy-ui#1759

Speckle,
@Speckle@lemmy.world avatar

This is really interesting and good to know, thank you for sharing. I’m going to try and remember this for all my images going forward.

For posts that are image based does the OP need to describe them or is that covered somehow already by screen readers?

ShittyKopper,

There are no descriptions for image posts. You can however make a post that is both an image and text post at the same time, and throw the description there, until a proper way to put alt text gets implemented.

chaorace,
@chaorace@lemmy.sdf.org avatar

Excellent question. For image-based posts, there is currently no mechanism to directly embed alt-text. This is likely to change in the future, however, so subscribe to lemmy#1086 for updates.

For now, the general advice is to use the post body to describe the linked image (on Lemmy, all posts are allowed to have “self-post”-like text). This would work by linking the image directly as usual and also embedding the same image in the post text with alt-text included there.

Tinawebmom,

Wait. So this is only if you post a image based comment?

Drunemeton,
@Drunemeton@lemmy.world avatar

Great advice! It’s pretty easy to just double paste the URL into both spots.

chaorace,
@chaorace@lemmy.sdf.org avatar

Indeed, but just FYI: doing this is actually even worse than leaving a completely empty alt-text!

Why? Because some browsers have experimental support for AI-generated alt-text. If an image has no alt-text, it’ll try to generate one, but only if the alt text is empty. This feature will probably become more common in the future, so please try to refrain from putting non-descriptive stuff in the alt-text area.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • youshouldknow@lemmy.world
  • DreamBathrooms
  • magazineikmin
  • everett
  • InstantRegret
  • rosin
  • Youngstown
  • slotface
  • love
  • khanakhh
  • kavyap
  • tacticalgear
  • GTA5RPClips
  • thenastyranch
  • modclub
  • megavids
  • mdbf
  • normalnudes
  • Durango
  • ethstaker
  • osvaldo12
  • cubers
  • ngwrru68w68
  • tester
  • anitta
  • cisconetworking
  • Leos
  • provamag3
  • JUstTest
  • All magazines