This is a good reminder to me that while sometimes it's a pain in the neck to make sure there are alt tags for every image, or make sure things are in text form rather than a pdf, that you can tab through a site, etc. - it makes it so everyone can use the internet more easily and that's important.
I work with restaurants a lot as a part of my job, and there's been a big push to make sure all the websites are ADA compliant; it's something all front end devs and digital marketers should keep in mind.
If anyone is aware of a good resource for how to write alt tags for photos I would be most appreciative. I never know how much detail is appropriate. Is it a photo of “pink flowers” or “pink chrysanthemums” or “pink chrysanthemums in a glass vase on a dining room table”? Or maybe something else entirely? I’m never sure how to balance descriptiveness vs brevity.
I generally tell people that alt text is one of the few places where accessibility can be as much art as it is science. As other commenters noted, context is important. Images will most likely be consumed with its surrounding context. If the image is bringing nothing new, consider marking it as decorative.
But if it isn't, express the intent of the image along with its content. Let's say you're back in the office, and describing a photo to someone sitting at a desk across from you. How would you describe it? It the point of the image that it's art? Is it the structure and layout of the scene? Is the point just to identify what a chrysanthemum looks like?
I'm often reminded by a colleague that if you get too wordsy with alt text, or it doesn't seem important or valid, a screen reader user can easily skip past the image and move on.
At the end of it all, the two most important bits seem to be: making any effort is better than not trying at all, do your best and you'll get better at it over time; and remember that even though a screen reader (or some other mechanical assistive technology) will parse the text you write, you're doing this for the person on the other side — they love to laugh, smile, have fun, learn, and understand things just like you do. :)
I have a perceptual visual disability (severe convergence insufficiency) that does not affect actual visual acuity. However, I do rely on screen readers for reading and I use (and have access to) several libraries for people with print-related disabilities.
The above guidelines are an initiative of Bookshare.org, which is the world’s largest digital library (which only people with print related disabilities can legally access).
As a blind person, I've been thinking a lot about this issue.
I think the best recommendation I can give is to try interacting with the resource as if the image wasn't there. Maybe remove it for a while. Put the information that you're missing in the alt description. If all the information from the image is understandable without seeing it, think decorative images in newspaper articles, set alt to "".
In particular, if the image is a screenshot of a terminal, code or other piece of text, you should put the whole text in the description. In that case, strongly consider omitting the image entirely. When charts are involved, often providing the data in a table next to the chart is the right way to go.
> I think the best recommendation I can give is to try interacting with the resource as if the image wasn't there. Maybe remove it for a while. Put the information that you're missing in the alt description.
This is really helpful, thanks! Maybe I’ve been too caught up in wondering whether my alt text would be burdensome to listen to on a screen reader that I’ve been missing the forest for the trees!
Some images of flowers behave like headings; some are "the content"; some are decoration. Identify the function and work from there.
By default images are "replaced inline elements" i.e. they're of the same kind as inline text. This is why `alt=""` is perfectly valid and correct for a lot of images! If you couldn't see the image, what would you want in that place, in the context of the text around it?
Don't have a good resource of my own either, but I think I would prefer more descriptiveness. Reading the various options you've written gives me totally different ideas of the image in my mind so, especially if it's important to the website, more descriptiveness seems appropriate for higher accuracy.
I think that this would depend on whether or not the photo has a caption. Captions themselves should strive to answer the five Ws: who, what, when, where, and why.
> or make sure things are in text form rather than a pdf
I publish a digital magazine every month in PDF format (it's free to download). I thought PDF was ok for screen readers. We have been doing this for years now (more than 70 issues, 6 years), so it would be a bit too late to change into HTML now :(
I work with restaurants a lot as a part of my job, and there's been a big push to make sure all the websites are ADA compliant; it's something all front end devs and digital marketers should keep in mind.