4 ms·

Not the gp, but currently reading a web novel with a card game where the author didn't include alt text in the card images. I contacted them about it and they s

by gostsamo 11mo ago

Not the gp, but currently reading a web novel with a card game where the author didn't include alt text in the card images. I contacted them about it and they started, but in the meantime ai was a big help. all kinds of other images on the internet as well when they are significant to understanding the surrounding text. better search experience when Google, DDG, and the like make finding answers difficult. I might use smart glasses for better outdoor orientation, though a good solution might take some time. phone camera plus ai is also situationally useful.

dzhiurgis 11mo ago
As a (web app) developer I never quite sure what to put in alt. Figured you might have some advice here?
- gostsamo 11mo ago
  The question to ask is, what a sighted person learns after looking at the image? The answer is the alt text. E.g if the image is a floppy, maybe you communicate that this is the save button. If it shows a cat sleeping on the windowsill, the alt text is yep: "my cat looking cute while sleeping on the windowsill".
  - michaelbuckbee 11mo ago
    I really like how you framed this as the takeaway or learning that needs to happen as what should be in the alt and not a recitation of the image. Where I've often had issues is more for things like business charts and illustrations and less cute cat photos.
    - travisjungroth 11mo ago
      It might be that you’re not perfectly clear on what exactly you’re trying to convey with the image and why it’s there.
      - gostsamo 11mo ago
        sorry, snark does not help with my desire to improve accessibility in the wild.
        travisjungroth 11mo ago
        I really didn’t mean to be snarky. Maybe if I was speaking, my tone would have made that more clear, or I could have worded it differently. “Why is this here? What am I trying to say?” are super important things in design and also so easy to lose track of.
      - hrimfaxi 11mo ago
        What would you put for this? "Graph of All-Transactions House Price Index for the United States 1975-2025"? https://fred.stlouisfed.org/series/USSTHPI https://fred.stlouisfed.org/series/USSTHPI
        travisjungroth 11mo ago
        Charts would have a link to tabular data. It’s the “business illustrations” that are more about understanding purpose.
        wlesieutre 11mo ago
        Charts are one I've wondered about, do I need to try to describe the trend of the data, or provide several conclusions that a person seeing the chart might draw? Just saying "It's a chart" doesn't feel like it'd be useful to someone who can't see the chart. But if the other text on the page talks about the chart, then maybe identifying it as the chart is enough?
        gostsamo 11mo ago
        It depends on the context. What do you want to say? How much of it is said in the text? Can the content of the image be inferred from the text part? Even in the best scenario though, giving a summary of the image in the alt text / caption could be immensely useful and include the reader in your thought process.
    - isoprophlex 11mo ago
      "A meaningless image of a chart, from which nevertheless emanates a feeling of stonks going up"
    - gostsamo 11mo ago
      The logic stays the same though the answer is longer and not always easy. Just saying "business chart" is totally useless. You can make a choice on what to focus and say "a chart of the stock for the last five years with constant improvement and a clear increase by 17 percent in 2022" (if it is a simple point that you are trying to make) or you can provide an html table with the datapoints if there is data that the user needs to explore on their own.
      - nextaccountic 11mo ago
        but the table exists outside the alt text, right? i don't know a mechanism to say "this html table represents the contents of this image" , in a way that screen readers and other accessibility technologies take advantage of
        gostsamo 11mo ago
        The figure tag has both image and caption tags that link them. As far as I remember, some content could be marked as screen reader only if you don't want for the table to be visible to the rest of the users. Additionally, recently I've been a participant in accessibility studies where charts, diagrams and the like have been structured to be easier to explore with a sr. Those needed js to work and some of them looked custom, but they are also an alternative way to layer data.
      - alwillis 11mo ago
        Accessible info graphics [1] [1]: https://web.archive.org/web/20130922065731/http://www.last-child.com:80/accessible-infographics/ https://web.archive.org/web/20130922065731/http://www.last-c...
- askew 11mo ago
  One way to frame it is: "how would I describe this image to somebody sat next to me?"
  - embedding-shape 11mo ago
    Important to add for blind people: "... assuming they never seen anything and visual metaphors won't work" The amount of times I've seem captions that wouldn't make sense for people who never been able to see is staggering, I don't think most people realize how visual our typical language usage is.
- shagie 11mo ago
  I'm gonna flip this around... have you tried pasting the image (and the relevant paragraph of text) and asking ChatGPT (or another LLM) to generate the alt text for the image and see what it produces? For example... https://chatgpt.com/share/692f1578-2bcc-8011-ac8f-a57f2ab6a7e6 https://chatgpt.com/share/692f1578-2bcc-8011-ac8f-a57f2ab6a7...
  - alwillis 11mo ago
    > I'm gonna flip this around... have you tried pasting the image (and the relevant paragraph of text) and asking ChatGPT (or another LLM) to generate the alt text for the image and see what it produces? There's a great app by an indie developer that uses ML to identify objects in images. Totally scriptable via JavaScript, shell script and AppleScript. macOS only. Could be 10, 100 or 1,000 images [1]. [1]: https://flyingmeat.com/retrobatch/ https://flyingmeat.com/retrobatch/
- alwillis 11mo ago
  > As a (web app) developer I never quite sure what to put in alt. Are you making these five mistakes when writing alt text? [1] Images tutorial [2] Alternative Text [3] [1]: https://www.a11yproject.com/posts/are-you-making-these-five-mistakes-when-writing-alt-text/ https://www.a11yproject.com/posts/are-you-making-these-five-... [2]: https://www.w3.org/WAI/tutorials/images/ https://www.w3.org/WAI/tutorials/images/ [3]: https://webaim.org/techniques/alttext/ https://webaim.org/techniques/alttext/

dzhiurgis 11mo ago

As a (web app) developer I never quite sure what to put in alt. Figured you might have some advice here?

gostsamo 11mo ago
The question to ask is, what a sighted person learns after looking at the image? The answer is the alt text. E.g if the image is a floppy, maybe you communicate that this is the save button. If it shows a cat sleeping on the windowsill, the alt text is yep: "my cat looking cute while sleeping on the windowsill".
- michaelbuckbee 11mo ago
  I really like how you framed this as the takeaway or learning that needs to happen as what should be in the alt and not a recitation of the image. Where I've often had issues is more for things like business charts and illustrations and less cute cat photos.
  - travisjungroth 11mo ago
    It might be that you’re not perfectly clear on what exactly you’re trying to convey with the image and why it’s there.
    - gostsamo 11mo ago
      sorry, snark does not help with my desire to improve accessibility in the wild.
      - travisjungroth 11mo ago
        I really didn’t mean to be snarky. Maybe if I was speaking, my tone would have made that more clear, or I could have worded it differently. “Why is this here? What am I trying to say?” are super important things in design and also so easy to lose track of.
    - hrimfaxi 11mo ago
      What would you put for this? "Graph of All-Transactions House Price Index for the United States 1975-2025"? https://fred.stlouisfed.org/series/USSTHPI https://fred.stlouisfed.org/series/USSTHPI
      - travisjungroth 11mo ago
        Charts would have a link to tabular data. It’s the “business illustrations” that are more about understanding purpose.
      - wlesieutre 11mo ago
        Charts are one I've wondered about, do I need to try to describe the trend of the data, or provide several conclusions that a person seeing the chart might draw? Just saying "It's a chart" doesn't feel like it'd be useful to someone who can't see the chart. But if the other text on the page talks about the chart, then maybe identifying it as the chart is enough?
        gostsamo 11mo ago
        It depends on the context. What do you want to say? How much of it is said in the text? Can the content of the image be inferred from the text part? Even in the best scenario though, giving a summary of the image in the alt text / caption could be immensely useful and include the reader in your thought process.
  - isoprophlex 11mo ago
    "A meaningless image of a chart, from which nevertheless emanates a feeling of stonks going up"
  - gostsamo 11mo ago
    The logic stays the same though the answer is longer and not always easy. Just saying "business chart" is totally useless. You can make a choice on what to focus and say "a chart of the stock for the last five years with constant improvement and a clear increase by 17 percent in 2022" (if it is a simple point that you are trying to make) or you can provide an html table with the datapoints if there is data that the user needs to explore on their own.
    - nextaccountic 11mo ago
      but the table exists outside the alt text, right? i don't know a mechanism to say "this html table represents the contents of this image" , in a way that screen readers and other accessibility technologies take advantage of
      - gostsamo 11mo ago
        The figure tag has both image and caption tags that link them. As far as I remember, some content could be marked as screen reader only if you don't want for the table to be visible to the rest of the users. Additionally, recently I've been a participant in accessibility studies where charts, diagrams and the like have been structured to be easier to explore with a sr. Those needed js to work and some of them looked custom, but they are also an alternative way to layer data.
    - alwillis 11mo ago
      Accessible info graphics [1] [1]: https://web.archive.org/web/20130922065731/http://www.last-child.com:80/accessible-infographics/ https://web.archive.org/web/20130922065731/http://www.last-c...
askew 11mo ago
One way to frame it is: "how would I describe this image to somebody sat next to me?"
- embedding-shape 11mo ago
  Important to add for blind people: "... assuming they never seen anything and visual metaphors won't work" The amount of times I've seem captions that wouldn't make sense for people who never been able to see is staggering, I don't think most people realize how visual our typical language usage is.
shagie 11mo ago
I'm gonna flip this around... have you tried pasting the image (and the relevant paragraph of text) and asking ChatGPT (or another LLM) to generate the alt text for the image and see what it produces? For example... https://chatgpt.com/share/692f1578-2bcc-8011-ac8f-a57f2ab6a7e6 https://chatgpt.com/share/692f1578-2bcc-8011-ac8f-a57f2ab6a7...
- alwillis 11mo ago
  > I'm gonna flip this around... have you tried pasting the image (and the relevant paragraph of text) and asking ChatGPT (or another LLM) to generate the alt text for the image and see what it produces? There's a great app by an indie developer that uses ML to identify objects in images. Totally scriptable via JavaScript, shell script and AppleScript. macOS only. Could be 10, 100 or 1,000 images [1]. [1]: https://flyingmeat.com/retrobatch/ https://flyingmeat.com/retrobatch/
alwillis 11mo ago
> As a (web app) developer I never quite sure what to put in alt. Are you making these five mistakes when writing alt text? [1] Images tutorial [2] Alternative Text [3] [1]: https://www.a11yproject.com/posts/are-you-making-these-five-mistakes-when-writing-alt-text/ https://www.a11yproject.com/posts/are-you-making-these-five-... [2]: https://www.w3.org/WAI/tutorials/images/ https://www.w3.org/WAI/tutorials/images/ [3]: https://webaim.org/techniques/alttext/ https://webaim.org/techniques/alttext/