Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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


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".


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.


"A meaningless image of a chart, from which nevertheless emanates a feeling of stonks going up"


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.



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


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.


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.


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


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?


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.


What are you trying to point out with your graph in general? Write that basically. Usually graphs are added for some purpose, and assuming it's not purposefully misleading, verbalizing the purpose usually works well.


I might be an unusual case, but when I present graphs/charts it's not usually because I'm trying to point something out. It's usually a "here's some data, what conclusions do you draw from this?" and hopefully a discussion will follow. Example from recently: "Here is a recent survey of adults in the US and their religious identification, church attendance levels, self-reported "spirituality" level, etc. What do you think is happening?"

Would love to hear a good example of alt text for something like that where the data isn't necessarily clear and I also don't want to do any interpreting of the data lest I influence the person's opinion.


> and hopefully a discussion will follow.

Yeah, I think I misunderstood the context. I understood/assumed it to be for an article/post you're writing, where you have something you want to say in general/some point of what you're writing. But based on what you wrote now, it seems to be more about how to caption an image you're sending to a blind person in a conversation/discussion of some sort.

I guess at that point it'd be easier for them if you just share the data itself, rather than anything generated by the data, especially if there is nothing you want to point out.


An image is the wrong way to convey something like that to a blind person. As written in one of my other comments, give the data in a table format or a custom widget that could be explored.


https://www.w3.org/WAI/tutorials/images/ including how write alt text for charts.


Charts would have a link to tabular data. It’s the “business illustrations” that are more about understanding purpose.


a plaintext table with the actual data


sorry, snark does not help with my desire to improve accessibility in the wild.


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.


> 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-...

[2]: https://www.w3.org/WAI/tutorials/images/

[3]: https://webaim.org/techniques/alttext/


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-a57f2ab6a7...


> 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/


One way to frame it is: "how would I describe this image to somebody sat next to me?"


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.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: