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@lemmy.sdf.orgOP
    link
    fedilink
    English
    arrow-up
    77
    ·
    1 year 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)

        • CoderKat@lemm.ee
          link
          fedilink
          English
          arrow-up
          15
          ·
          1 year 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.

  • rbhfd@lemmy.world
    link
    fedilink
    English
    arrow-up
    36
    ·
    1 year 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!

    • Samuel Proulx@rblind.com
      link
      fedilink
      English
      arrow-up
      27
      ·
      1 year 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.

  • raiun@lemmy.world
    link
    fedilink
    English
    arrow-up
    23
    ·
    1 year 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.

  • Speckle@lemmy.world
    link
    fedilink
    English
    arrow-up
    12
    ·
    1 year 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?

    • chaorace@lemmy.sdf.orgOP
      link
      fedilink
      English
      arrow-up
      13
      arrow-down
      1
      ·
      1 year 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.

    • ShittyKopper [they/them]@lemmy.w.on-t.work
      link
      fedilink
      English
      arrow-up
      2
      arrow-down
      1
      ·
      edit-2
      1 year 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.

      • dom
        link
        fedilink
        English
        arrow-up
        5
        ·
        1 year ago

        It doesn’t play for me in jerboa

          • dom
            link
            fedilink
            English
            arrow-up
            1
            ·
            1 year 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

      • CeruleanRuin@lemmy.one
        link
        fedilink
        English
        arrow-up
        4
        ·
        1 year 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.

    • Bongles@lemm.ee
      link
      fedilink
      English
      arrow-up
      11
      ·
      1 year 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

      • mintiefresh
        link
        fedilink
        English
        arrow-up
        4
        ·
        1 year ago

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

        • Bongles@lemm.ee
          link
          fedilink
          English
          arrow-up
          5
          ·
          1 year 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.

  • explodicle@local106.com
    link
    fedilink
    English
    arrow-up
    5
    ·
    1 year ago

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

    • megahertz@lemmy.world
      link
      fedilink
      English
      arrow-up
      2
      ·
      1 year 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.

      • explodicle@local106.com
        link
        fedilink
        English
        arrow-up
        1
        ·
        1 year 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.

    • chaorace@lemmy.sdf.orgOP
      link
      fedilink
      English
      arrow-up
      11
      ·
      1 year 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.

    • CoderKat@lemm.ee
      link
      fedilink
      English
      arrow-up
      1
      ·
      1 year 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.

    • Arthur Besse@lemmy.ml
      link
      fedilink
      English
      arrow-up
      2
      ·
      edit-2
      1 year 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!