YSK: How to embed images accessibly on Lemmy

3 years ago by chaorace to c/youshouldknow

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: https://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.

chaorace 80 points 3 years ago

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)

path: 0 737907, hotness: undefined, score: 80, children: 3

lol 19 points 3 years ago

path: 0 737907 738648, hotness: undefined, score: 19, children: 2

bonfire921 5 points 3 years ago

Hmmm seems like the text doesn't show up on Jerboa

path: 0 737907 738648 745203, hotness: undefined, score: 5, children: 1

CoderKat 15 points 3 years ago

The text isn't supposed to show up. It's alternative text for viewers that can't see the image (or otherwise need it described).

In web browsers, you often can long press the see alt or title text, though. As an aside, title text is kinda similar to alt text, but shows up on hover in desktop (on mobile, it's also long press). It's not meant for accessibility and not usually friendly for it. It's usually for supplementary information and not to describe the image. Eg, an acronym might have title text that defines what the acronym stands for.

path: 0 737907 738648 745203 755067, hotness: undefined, score: 15, children: 0

wit 42 points 3 years ago

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

path: 0 738055, hotness: undefined, score: 42, children: 5

chaorace 12 points 3 years ago

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

path: 0 738055 739118, hotness: undefined, score: 12, children: 4

wit 9 points 3 years ago

YES! But please don't spoil. I am on the 4th book, Rythm of War, for many months now.. I have read 50% but it just goes so slowly... The first and second book, The Way of Kings and Words of Radiance, are my favorite books ever. Wit is one of my favourite characters, just so quick and witty and mysterious...

path: 0 738055 739118 740030, hotness: undefined, score: 9, children: 0

kiddblur 3 points 3 years ago

I just finished rereading way of kings Friday and am reading SP3 right now! Hello fellow sanderfan

path: 0 738055 739118 742992, hotness: undefined, score: 3, children: 0

WagnasT 1 point 3 years ago

https://lemm.ee/c/remposting join us, your words will be accepted

path: 0 738055 739118 778603, hotness: undefined, score: 1, children: 1

chaorace 1 point 3 years ago

I'm afraid that I've already beaten you to the punch, cremling: https://lemm.ee/post/58419

path: 0 738055 739118 778603 782790, hotness: undefined, score: 1, children: 0

rbhfd 38 points 3 years ago

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!

path: 0 738325, hotness: undefined, score: 38, children: 3

fastfinge 28 points 3 years ago

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.

path: 0 738325 740853, hotness: undefined, score: 28, children: 2

rbhfd 13 points 3 years ago

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.

path: 0 738325 740853 741384, hotness: undefined, score: 13, children: 0

rbhfd 2 points 3 years ago

Follow up: did I do it correctly here?

https://lemmy.world/comment/766594

path: 0 738325 740853 766625, hotness: undefined, score: 2, children: 0

raiun 26 points 3 years ago

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.

path: 0 738516, hotness: undefined, score: 26, children: 1

chaorace 21 points 3 years ago

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

path: 0 738516 738886, hotness: undefined, score: 21, children: 0

doom_and_gloom 22 points 3 years ago

path: 0 740742, hotness: undefined, score: 22, children: 0

Speckle 13 points 3 years ago

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?

path: 0 737853, hotness: undefined, score: 13, children: 7

chaorace 12 points 3 years ago

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.

path: 0 737853 738250, hotness: undefined, score: 12, children: 2

Tinawebmom 1 point 3 years ago

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

path: 0 737853 738250 777108, hotness: undefined, score: 1, children: 0

Speckle 1 point 3 years ago

Excellent, thank you for explaining that for me

path: 0 737853 738250 738570, hotness: undefined, score: 1, children: 0

ShittyKopper 5 points 3 years ago

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.

path: 0 737853 738593, hotness: undefined, score: 5, children: 3

70ms 2 points 3 years ago

Any tips for a sighted person on what makes for a good and useful description?

path: 0 737853 738593 739114, hotness: undefined, score: 2, children: 2

ShittyKopper 1 point 3 years ago

I'm sighted (or, rather, sighted enough that glasses work) as well so I'm not the best person to answer this question.

path: 0 737853 738593 739114 739224, hotness: undefined, score: 1, children: 1

70ms 2 points 3 years ago

Hopefully someone will come along and answer. Thanks. :)

path: 0 737853 738593 739114 739224 740909, hotness: undefined, score: 2, children: 0

OtakuAltair 8 points 3 years ago

Great YSK! Definitely doing this from now!

path: 0 762952, hotness: undefined, score: 8, children: 0

Pillarist 7 points 3 years ago

I wish you could post gifs this way.

path: 0 759137, hotness: undefined, score: 7, children: 8

OtakuAltair 17 points 3 years ago

You can though?

Man bumps into someone, dodges his punch, kisses him on the forehead instead of getting confrontational, and walks away. Captioned: "I have no enemies"

path: 0 759137 763030, hotness: undefined, score: 17, children: 7

dom 5 points 3 years ago

It doesn't play for me in jerboa

path: 0 759137 763030 775065, hotness: undefined, score: 5, children: 3

OtakuAltair 5 points 3 years ago

Connect and Liftoff are better than Jerboa atm, try those

path: 0 759137 763030 775065 775385, hotness: undefined, score: 5, children: 2

RandomWords 2 points 3 years ago

I'm not getting the alt text in Connect, is there an option not enabled by default or something?

path: 0 759137 763030 775065 775385 779716, hotness: undefined, score: 2, children: 0

dom 1 point 3 years ago

I tried liftoff and found it was hard to browse compared to jerboa. At least on dark mode. All the test being white and not visually distinct makes it less comfortable to browse than jerboa.

I'll have to try connect though

path: 0 759137 763030 775065 775385 793507, hotness: undefined, score: 1, children: 0

Lulu 4 points 3 years ago

description is accurate👍

path: 0 759137 763030 776800, hotness: undefined, score: 4, children: 0

CeruleanRuin 3 points 3 years ago

Sweet, I can actually read the alt text by long-pressing the image. This opens up a whole new avenue for good caption gags.

path: 0 759137 763030 779277, hotness: undefined, score: 3, children: 0

Pillarist 2 points 3 years ago

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

path: 0 759137 763030 767853, hotness: undefined, score: 2, children: 0

xaxl 6 points 3 years ago

Is there a way to embed the actual image itself and not have to rely on a third party like Imgur?

path: 0 757356, hotness: undefined, score: 6, children: 4

Bongles 11 points 3 years ago

You can click the little image button when commenting or posting, but it uploads it to the instance you're on, which costs them space, so it's probably limited in most instances

path: 0 757356 758715, hotness: undefined, score: 11, children: 3

mintiefresh 4 points 3 years ago

And then is there a way to add alt text to that uploaded image?

path: 0 757356 758715 775631, hotness: undefined, score: 4, children: 2

Bongles 5 points 3 years ago

Yes, when I tried it just now it uploaded the picture and put the same text into the comment that you need to link external images ![alt text](link) it just had a link for the newly uploaded photo.

path: 0 757356 758715 775631 777043, hotness: undefined, score: 5, children: 1

mintiefresh 3 points 3 years ago

Thank you. I'll start doing this from now on!

path: 0 757356 758715 775631 777043 777911, hotness: undefined, score: 3, children: 0

LordTE7R1S 6 points 3 years ago

Thanks for this post!

path: 0 739164, hotness: undefined, score: 6, children: 0

calr0x 6 points 3 years ago

A soldier in the film Starship Troopers speaks directly to the viewer: "I'm doing my part!"

path: 0 739585, hotness: undefined, score: 6, children: 0

explodicle 4 points 3 years ago

Question for Jerboa users: how do you zoom in on one of these comment images? They're frequently too small to read.

path: 0 739961, hotness: undefined, score: 4, children: 2

megahertz 2 points 3 years ago

I'm guessing it is in settings? Also a jerboa user. But I am seeing the comment images at a reasonable size. I'm using the dark theme, and I think I changed the font size, but it's been almost a month since I first installed, so not super sure.

path: 0 739961 745891, hotness: undefined, score: 2, children: 1

explodicle 1 point 3 years ago

Hmm, I don't see anything for it in the settings. Some of the pictures are a reasonable size to me, I was thinking like pinch and zoom or something.

path: 0 739961 745891 793333, hotness: undefined, score: 1, children: 0

Drunemeton 4 points 3 years ago

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

path: 0 737703, hotness: undefined, score: 4, children: 2

chaorace 11 points 3 years ago

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.

path: 0 737703 738478, hotness: undefined, score: 11, children: 0

CoderKat 1 point 3 years ago

You shouldn't do that. That's not gonna help screen readers and in fact will just waste their time trying to read off a URL because it thinks it's describing the image. The alt text is intended to be human readable.

path: 0 737703 755152, hotness: undefined, score: 1, children: 0

trouser_mouse 4 points 3 years ago

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

path: 0 779514, hotness: undefined, score: 4, children: 0

Elektrotechnik 3 points 3 years ago

Very nice, thanks for the write up!

path: 0 780251, hotness: undefined, score: 3, children: 0

EgnlishPro 3 points 3 years ago

Dude, sweet

path: 0 746191, hotness: undefined, score: 3, children: 1

cypherpunks 2 points 3 years ago

![Dude, sweet](https://cdn.mos.cms.futurecdn.net/f19cc921c5d2ab5c1c928088f515a330-1200-80.jpg)

that is not how to use alt text.

it should actually be a description of the image, for blind people.

also, web users who aren't using some accessibility tool can't even see it without right-clicking and inspecting the element or clicking lemmy's "view source" button (as i just did to quote your comment here). so, please don't use alt text for things other than descriptions of images!

path: 0 746191 780048, hotness: undefined, score: 2, children: 0

BrikoX 3 points 3 years ago

You can also copy and paste the image with Ctrl+C/Ctrl+V directly into the post or comment. Then the only think left is adding the alt text.

path: 0 739942, hotness: undefined, score: 3, children: 0

MostlyBlindGamer 2 points 3 years ago

This message is officially approved by RBlind. Thank you.

You are all making the open web a better place.

path: 0 1834691, hotness: undefined, score: 2, children: 0

EgnlishPro 1 point 3 years ago

path: 0 746210, hotness: undefined, score: 1, children: 0

youshouldknow

@lemmy.world

login for more options

YSK - for all the things that can make your life easier!

The rules for posting and commenting, besides the rules defined here for lemmy.world, are as follows:

Rules (interactive)

Rule 1- All posts must begin with YSK.

All posts must begin with YSK. If you're a Mastodon user, then include YSK after @youshouldknow. This is a community to share tips and tricks that will help you improve your life.

Rule 2- Your post body text must include the reason **WHY** YSK:

In your post's text body, you must include the reason "Why" YSK: It’s helpful for readability, and informs readers about the importance of the content.

Rule 3- Do not seek mental, medical and professional help here.

Do not seek mental, medical and professional help here. Breaking this rule will not get you or your post removed, but it will put you at risk, and possibly in danger.

Rule 4- No self promotion or upvote-farming of any kind.

That's it.

Rule 5- No baiting or sealioning or promoting an agenda.

Posts and comments which, instead of being of an innocuous nature, are specifically intended (based on reports and in the opinion of our crack moderation team) to bait users into ideological wars on charged political topics will be removed and the authors warned - or banned - depending on severity.

Rule 6- Regarding non-YSK posts.

Provided it is about the community itself, you may post non-YSK posts using the [META] tag on your post title.

Rule 7- You can't harass or disturb other members.

If you harass or discriminate against any individual member, you will be removed.

If you are a member, sympathizer or a resemblant of a movement that is known to largely hate, mock, discriminate against, and/or want to take lives of a group of people and you were provably vocal about your hate, then you will be banned on sight.

For further explanation, clarification and feedback about this rule, you may follow this link.

Rule 8- All comments should try to stay relevant to their parent content.

Rule 9- Reposts from other platforms are not allowed.

Let everyone have their own content.

Rule 10- The majority of bots aren't allowed to participate here.

Unless included in our Whitelist for Bots, your bot will not be allowed to participate in this community. To have your bot whitelisted, please contact the moderators for a short review.

Rule 11- Posts must actually be true:

Disinformation, trolling, and being misleading will not be tolerated. Repeated or egregious attempts will earn you a ban. This also applies to filing reports: If you continually file false reports YOU WILL BE BANNED! We can see who reports what, and shenanigans will not be tolerated. We are not here to ban people who said something you don't like.

Rule 12- Linking directly to a video as a source is not acceptable.

Video only posts are responsible for an outsized portion of rules violations. Your post must contain text and meet the requirements of the previous rules.

Rule 13- If you file a report, include what specific rule is being violated and how.

Partnered Communities:

You can view our partnered communities list by following this link. To partner with our community and be included, you are free to message the moderators or comment on a pinned post.

Community Moderation

For inquiry on becoming a moderator of this community, you may comment on the pinned post of the time, or simply shoot a message to the current moderators.

Credits

Our icon(masterpiece) was made by @clen15!

go to feed...

youshouldknow

@lemmy.world

login for more options

YSK - for all the things that can make your life easier!

The rules for posting and commenting, besides the rules defined here for lemmy.world, are as follows:

Rules (interactive)

Rule 1- All posts must begin with YSK.

All posts must begin with YSK. If you're a Mastodon user, then include YSK after @youshouldknow. This is a community to share tips and tricks that will help you improve your life.

Rule 2- Your post body text must include the reason **WHY** YSK:

In your post's text body, you must include the reason "Why" YSK: It’s helpful for readability, and informs readers about the importance of the content.

Rule 3- Do not seek mental, medical and professional help here.

Do not seek mental, medical and professional help here. Breaking this rule will not get you or your post removed, but it will put you at risk, and possibly in danger.

Rule 4- No self promotion or upvote-farming of any kind.

That's it.

Rule 5- No baiting or sealioning or promoting an agenda.

Posts and comments which, instead of being of an innocuous nature, are specifically intended (based on reports and in the opinion of our crack moderation team) to bait users into ideological wars on charged political topics will be removed and the authors warned - or banned - depending on severity.

Rule 6- Regarding non-YSK posts.

Provided it is about the community itself, you may post non-YSK posts using the [META] tag on your post title.

Rule 7- You can't harass or disturb other members.

If you harass or discriminate against any individual member, you will be removed.

If you are a member, sympathizer or a resemblant of a movement that is known to largely hate, mock, discriminate against, and/or want to take lives of a group of people and you were provably vocal about your hate, then you will be banned on sight.

For further explanation, clarification and feedback about this rule, you may follow this link.

Rule 8- All comments should try to stay relevant to their parent content.

Rule 9- Reposts from other platforms are not allowed.

Let everyone have their own content.

Rule 10- The majority of bots aren't allowed to participate here.

Unless included in our Whitelist for Bots, your bot will not be allowed to participate in this community. To have your bot whitelisted, please contact the moderators for a short review.

Rule 11- Posts must actually be true:

Disinformation, trolling, and being misleading will not be tolerated. Repeated or egregious attempts will earn you a ban. This also applies to filing reports: If you continually file false reports YOU WILL BE BANNED! We can see who reports what, and shenanigans will not be tolerated. We are not here to ban people who said something you don't like.

Rule 12- Linking directly to a video as a source is not acceptable.

Video only posts are responsible for an outsized portion of rules violations. Your post must contain text and meet the requirements of the previous rules.

Rule 13- If you file a report, include what specific rule is being violated and how.

Partnered Communities:

You can view our partnered communities list by following this link. To partner with our community and be included, you are free to message the moderators or comment on a pinned post.

Community Moderation

For inquiry on becoming a moderator of this community, you may comment on the pinned post of the time, or simply shoot a message to the current moderators.

Credits

Our icon(masterpiece) was made by @clen15!

go to feed...