Blind and Visually Impaired Community
↑
6
↓
Looking for Alt Text Help (self.Blind)
submitted by dewjonesdiary
Hello r/Blind!
I help run the social media accounts at my job and have trying to update how we do our alt text.
While there are dozens of random guides out there, it can be stressful knowing what is actually best practice as my field does not have very good standards.
Would anyone here have any recommendations on specific guides or even just some tips on what makes for the most useful alt text?
I read the FAQ and this wasn't listed so I hope this question is okay!
I help run the social media accounts at my job and have trying to update how we do our alt text.
While there are dozens of random guides out there, it can be stressful knowing what is actually best practice as my field does not have very good standards.
Would anyone here have any recommendations on specific guides or even just some tips on what makes for the most useful alt text?
I read the FAQ and this wasn't listed so I hope this question is okay!
AutomaticChair9 8 points 1y ago
As someone who writes quite a bit of alt text, here are my thoughts:
1. Alt text should be short (no more than one to two sentences)
2. Alt text should describe what you see without much (if any) additional context. (e.g., "A cow standing on a grassy field with farm buildings in the distance.")
3. Alt text is NOT the same as a caption. The caption for the same picture might read "Farmer John's cow loves apples and is expecting a calf in June!"
4. If there is text in an image, that text should be represented somewhere else in an accessible way. Try to avoid doing things like using an image that says "we are open from 9-11 on Saturdays. Call xxx-xxxx for an appointment". Add that as text somewhere.
5. If the image or graphic is very complex (like an infographic or chart), do not try to use alt text to explain it. Create a long description and add that to the post (or link to a longer description of the graphic).
I hope this helps!
1. Alt text should be short (no more than one to two sentences)
2. Alt text should describe what you see without much (if any) additional context. (e.g., "A cow standing on a grassy field with farm buildings in the distance.")
3. Alt text is NOT the same as a caption. The caption for the same picture might read "Farmer John's cow loves apples and is expecting a calf in June!"
4. If there is text in an image, that text should be represented somewhere else in an accessible way. Try to avoid doing things like using an image that says "we are open from 9-11 on Saturdays. Call xxx-xxxx for an appointment". Add that as text somewhere.
5. If the image or graphic is very complex (like an infographic or chart), do not try to use alt text to explain it. Create a long description and add that to the post (or link to a longer description of the graphic).
I hope this helps!
dewjonesdiary [OP] 2 points 1y ago
This is incredibly helpful, yes, thank you!!
If there is text in the image, usually because it's being shared from on high, do you add the text to the caption? I've heard mixed views on this and wasn't sure about best practice
If there is text in the image, usually because it's being shared from on high, do you add the text to the caption? I've heard mixed views on this and wasn't sure about best practice
AutomaticChair9 2 points 1y ago
I think it depends on the format of the communication. If it was a website and there was an image with text in it, there is space to work that information to the text on the page (like a phone number or date and time for an event). If it's Facebook or Instagram there is much less room and you might be limited to the caption. I would put that information in a caption before I would put it in the alt text.
dewjonesdiary [OP] 1 points 1y ago
Thanks for the clarification. This has all been incredibly helpful!
SightlessKombat 1 points 1y ago
Just a couple of thoughts:
I would disagree on the lengths of alt text, sometimes you need to describe through longer than two sentences what is going on, particularly with things like GIFS or with images with lots of small details. I agree with the rest of your points other than that of using long descriptions - there are places that support it, but I've personally never come across anything with modern social media that does (i.e. Twitter) though that could just be me. An alternative for Twitter if it doesn't fit in to the actual alt text field would be to put it in replies and state that you've done so in the original tweet/post.
I would disagree on the lengths of alt text, sometimes you need to describe through longer than two sentences what is going on, particularly with things like GIFS or with images with lots of small details. I agree with the rest of your points other than that of using long descriptions - there are places that support it, but I've personally never come across anything with modern social media that does (i.e. Twitter) though that could just be me. An alternative for Twitter if it doesn't fit in to the actual alt text field would be to put it in replies and state that you've done so in the original tweet/post.
Shadowwynd 5 points 1y ago
Always tag if the image has text or is meant to convey content. If the image has important text, put the important text as TEXT. For example, lets say you are having a party. You have a great graphic that you have made that has the particulars in the flyer and you post it on Facebook. By all means, put the relevant particulars (What it is, Who invited, Where is it, When is it) as an alt tag for the picture, however also put the basic information as plain text in the Facebook post. Same thing for email - I know several sighted people who have images turned off in their browsers because it makes it go faster (especially on older computers) or who have their email set to "plain text only". Having all the relevant info in a JPG means that they won't see it.
When doing web design, if an image is decorative, or a spacer for layout, or if it doesn't actually drive the narrative of the page, make sure to use a blank tag (or a Null tag, or an ALT-NULL). e.g. <IMG SRC="scrollwork.jpg" ALT=""> This indicates to screenreaders that the image was tagged, it is not missing the tag, but not to bother reading it or even bringing it to the user's attention. I would say that if an image does not help give information to a blind user, to go ahead and ALT="" it. For example, one of local internet companies has a page talking about their three tiers of service, with links to different pages to start the process of getting said internet. It has several pictures of happy teenagers using computers and gaming and some businessmen in suits before the descriptions of the internet packages. If it was me, I would just ALT="" on all the pictures (since the pictures are really not relevant, the main content is about tiers of internet), or pick one picture and ALT="Happy people using the internet for work and play" and ALT="" the rest.
As with any other hyperlink or action button, don't ALT tag an image with any variant of "CLICK HERE" or "DOWNLOAD" or any other generic action. Better would be "Download Hamster Huey music file" or "Donate money through Paypal".
If using stock footage, remove any machine tags such as aspect ratio or filetype. These should not be in the ALT tag. I saw this one recently:
ALT="16x9_picture_of_two_girls_playing_on_a_bed.jpg"
Consider the language you are using. Is the description useful? Does it matter? e.g. "An old woman in a red shirt is helping a child" is almost useless. Does it matter if her shirt is red? Does it matter if she is old? Helping a child do .... what? Is the child hurt? ..... Better might be "A teacher helps a child get dressed for winter play."
There are also ways to tag SVG files https://css-tricks.com/accessible-svgs/ , especially useful if you have icons or clipart (e.g. linking to Facegram or Twitspace ...)
When doing web design, if an image is decorative, or a spacer for layout, or if it doesn't actually drive the narrative of the page, make sure to use a blank tag (or a Null tag, or an ALT-NULL). e.g. <IMG SRC="scrollwork.jpg" ALT=""> This indicates to screenreaders that the image was tagged, it is not missing the tag, but not to bother reading it or even bringing it to the user's attention. I would say that if an image does not help give information to a blind user, to go ahead and ALT="" it. For example, one of local internet companies has a page talking about their three tiers of service, with links to different pages to start the process of getting said internet. It has several pictures of happy teenagers using computers and gaming and some businessmen in suits before the descriptions of the internet packages. If it was me, I would just ALT="" on all the pictures (since the pictures are really not relevant, the main content is about tiers of internet), or pick one picture and ALT="Happy people using the internet for work and play" and ALT="" the rest.
As with any other hyperlink or action button, don't ALT tag an image with any variant of "CLICK HERE" or "DOWNLOAD" or any other generic action. Better would be "Download Hamster Huey music file" or "Donate money through Paypal".
If using stock footage, remove any machine tags such as aspect ratio or filetype. These should not be in the ALT tag. I saw this one recently:
ALT="16x9_picture_of_two_girls_playing_on_a_bed.jpg"
Consider the language you are using. Is the description useful? Does it matter? e.g. "An old woman in a red shirt is helping a child" is almost useless. Does it matter if her shirt is red? Does it matter if she is old? Helping a child do .... what? Is the child hurt? ..... Better might be "A teacher helps a child get dressed for winter play."
There are also ways to tag SVG files https://css-tricks.com/accessible-svgs/ , especially useful if you have icons or clipart (e.g. linking to Facegram or Twitspace ...)
dewjonesdiary [OP] 1 points 1y ago
This is super detailed, thank you! I have definitely made some of these mistakes so I'll be keeping this all in mind going forward.
SightlessKombat 1 points 1y ago
What is your field, first off? Given you mentioned it, it might be useful to know.
Secondly though, I'd say describe what you think is relevant, starting with an overall idea of the shot and then "zooming in" to describe any key smaller details. (i.e. "A room containing large numbers of figurines. To the right of the room stand Delta Squad from Gears Of War and to the left a full-sized Halo Needler can be seen, resting on a soft red rug."). Forgive the gaming-centric example, but hopefully it clarifies my point. Everyone will probably tell you differently, but figure out how you want things to work as you go. After all, this is a learning process and the fact that you want to work with it at all is great.
I'm speaking as an accessibility consultant and have never had any sight, for reference.
Secondly though, I'd say describe what you think is relevant, starting with an overall idea of the shot and then "zooming in" to describe any key smaller details. (i.e. "A room containing large numbers of figurines. To the right of the room stand Delta Squad from Gears Of War and to the left a full-sized Halo Needler can be seen, resting on a soft red rug."). Forgive the gaming-centric example, but hopefully it clarifies my point. Everyone will probably tell you differently, but figure out how you want things to work as you go. After all, this is a learning process and the fact that you want to work with it at all is great.
I'm speaking as an accessibility consultant and have never had any sight, for reference.
dewjonesdiary [OP] 1 points 1y ago
I work for a public library system. We have a Facebook, Twitter, and Instagram presence and our social media team has been discussing creating actual standards for how we create our alt text as everyone kind of just does their own thing currently and there's zero consistency.
vwlsmssng 1 points 1y ago
dewjonesdiary [OP] 2 points 1y ago
This is fantastic! Thank you for sharing
This nonprofit website is run by volunteers.
Please contribute if you can. Thank you!
Our mission is to provide everyone with access to large-
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
©2023 HumbleCat Inc • HumbleCat is a 501(c)3 nonprofit based in Michigan, USA.