Skip to main content

FOBETEO Day 3 - Alt text

Posted by Kim on December 5, 2022, 9:00am

Yesterday, we talked about how we can be more excellent to people with light sensitivities all year round -- today, I want to talk about one way to be excellent to those who are low or no vision.

Many people assume that blind folks can't use computers, mobile phones or the internet very effectively, but this isn't true at all. Many blind folk are quite online, and very active on social networks. I personally know we have several active RPR users who are low- or no-vision. Some of them are quite open about their vision status, and others choose not to disclose at all. "Screen reading" programs these days are quite good, reading out loud all of the text on a website and sometimes even helping to describe the layout of a webpage for easier navigation.

But there's one area where screen reading programs can't help -- images. This is why "alt text" is so important. Alt text is short for "alternative text," and it's a text description that can be used as an alternative to an image when the image either can't be shown - maybe you're on a restricted wifi network with extra low bandwidth while traveling, and images won't load - or when they simply can't be seen. Alt text is read aloud to users who rely on screen readers.

And yes, at long last you can do this with RPR BBCode as well! Just use the attribute "alt" to describe what's happening in an image, like this:
Code:
[center][img alt="A red-haired girl in a big winter coat lights a candle held by a man in a red coat. Both are smiling and seem friendly."]https://static.rprepository.com/newsimgs/2015-12/fobeteo1-full.png[/img][/center]
A red-haired girl in a big winter coat lights a candle held by a man in a red coat. A large transparent snowflake is behind them. Both are smiling and seem friendly.

The image displays just as before, but now someone using a screen reader can have the image described to them! With just a few extra seconds, everyone is fully included. :D

Here's some tips for writing good alt descriptions:
  • Add alt text to all non-decorative images.
  • This includes gifs and memes being used as a reply in a conversation! Make sure everyone can follow the flow of the conversation by providing alt text.
  • Keep it short and descriptive.
  • You may wish to mention what kind of image it is -- a photo? An illustration? What style of art? This can help to give important context.
  • Resist the urge to use alt text for jokes that require seeing the image to get the context of what was said in the alt text. This usage has become popular in some segments of social media, but alt text isn't a funny caption, it's a disability accommodation.

fobeteo-candle.png fobeteo-candle.png fobeteo-candle.png

Remember, to be eligible, a kudos needs to contain a clear "why" explaining what makes your friend so special! Don't just say "He's awesome!", tell the world what makes your friend so awesome. Click here for the complete kudos guidelines.
fobeteo-candle.png fobeteo-candle.png fobeteo-candle.png

Post tags: FOBETEO FOBETEO 2022

Comments

DumboOctopus

January 2, 2023
2:56pm

I really like this feature & will sure use it to make my profile more friendly for disabled people! It's heartwarming to see admins showing that they also care for disabled users.

Ultimate.Gaymer

December 7, 2022
5:56am

For people who don't know: Discord has an alt text feature, and it doesn't work on a lot of devices (for some reason; thanks Discord.) In that case (or other places where alt text isn't an option), you can always just write the image description in a message/some other nearby text field.

Sin-fonie

December 7, 2022
5:13am

Oh and a little addition on what to look out for in coding with the alt text
(because I just found out by doing it wrong so it didn't work... XD)

Inside the " ... " description, you can not change the line you write in with the enter key without the code breaking. I guess there is no need to do so anyway, but with the url of the picture and the code tags, I think subconsciously I tried to do that for a better overview, but I guess it does somewhat like <br> in the code so the img alt= ... did not work anymore.

Sin-fonie

December 7, 2022
5:01am

This is very helpful and so interesting! I have to admit I did not know that there is a possibility to include these descriptions and was always wondering how to use a screen reader on image heavy sited at all - amazing to learn about how to help with making the site more accessible. Thank you a lot!

Auberon

December 6, 2022
11:22am

Gone are the days of me using acronym bbcode for alt text! I love this!

Sanne

December 5, 2022
10:38pm

Kim wrote:
I don't really disagree with you on anything you said there, Sanne! I guess in my mind, both the examples you provided still qualified just fine as short, but you're right that it's important to clarify that short isn't the most important part. :) The end goal is always usefulness and inclusion. Thank you for adding that!

I thought as much! I mostly chose to address it cause I know from first- and second-hand experience people can zoom in real bad on taking 'short' extremely literal for alt text and making it more important than having the alt text be actually inclusive. :) So I just wanted to emphasize on that in particular.

Kim

December 5, 2022
9:45pm

@sland - Yeah, this is very much on my radar. Currently looking at whether to expand the description field or to create a brand new alt text section.

sland

December 5, 2022
6:44pm

This is a nice surprise, looks like my days of size=1 to sneak in reader descriptions are numbered. Are there plans for the Gallery widget to get a space for alt text? The description field's 255-character limit doesn't really cut it.

Claine

December 5, 2022
5:54pm

If there's anybody who regularly uses a screen-reader, I'd really be interested in chatting with you in regard to my comic transcripts. I've never used one myself so I'm not 100% whether I'm conveying too much or not enough. (For example, if a random background character has a single line do you actually want "She has brown hair, and is wearing a leather jacket." or is that too much for a character who has served their purpose is never going to reappear.)

fig

December 5, 2022
4:55pm

as a visually impaired person this article meant a lot to me!! thank you so much for shining a light on this feature. i had no idea it was possible to do this.

Kim

December 5, 2022
3:05pm

Thank you for that, Faedreamer! I will update the article.

Ultimate.Gaymer

December 5, 2022
11:41am

"Don't include "image of" or "photo of" -- the screen reader will usually mention this already."
Mine doesn't. Also, on a similar note, I do think its good to specify what kind of picture it is (as in, "a photo of..." or "an illustration of..."
Someone could write "Image Description: An orange cat curled up on a blue blanket", but it sure would be nice to know if this is a photo of a real cat, or a drawing/painting/something else.

Kim

December 5, 2022
10:54am

I don't really disagree with you on anything you said there, Sanne! I guess in my mind, both the examples you provided still qualified just fine as short, but you're right that it's important to clarify that short isn't the most important part. :) The end goal is always usefulness and inclusion. Thank you for adding that!

Sanne

December 5, 2022
9:18am

I LOVE the new alt tag for images!!!

I have minor background retinopathy with worsening astigmatism and I'm at an increased risk for severe vision loss due to my chronic health issues, and the more I delve into accessibility the more I realize how left out visually impaired people are. I've sat with crying friends who just want to quit the internet entirely because the moment they have to rely on screen readers, it's not their vision that's keeping them from participating; it's people refusing to use alt text online that are.

The number of large companies that put out important information on images with no alt text is scary and astounding, which includes vital information such as food labels and safety announcements.

One thing I want to comment on is the "Keep it short and descriptive." part: I somewhat disagree with the 'short' bit based on my interactions with many visually impaired folks. Alt text needs to properly convey what is being shown and focusing on keeping it short leads to many people cutting corners and rendering the alt text nearly meaningless.

An example would be "A selfie of Sanne. She smiles at the camera and is holding her cat." If you've never seen me before, does this description tell you what I look like? What skin color do I have? What's my hair like? Am I wearing makeup? What kind of cat am I holding?

Alt text is really supposed to enable full and meaningful participation, and the above description tells you only that I'm smiling and holding a cat. It isn't full participation to only know these two features when there is so much more to describe me by. A better alt text would be:

"A selfie of Sanne smiling at the camera. She has pale white skin, and curly light brown hair past her shoulders. On her face is a pair of rectangular, black framed glasses, and she's wearing red lipstick and light brown eyeshadow. She's holding a tuxedo cat with large green eyes."

Not everything needs to be lengthy, and sometimes all you need is to include "White text on a black background that says..." but this has been a very common complaint in the visually impaired community, that people are skimping on the content because 'short' is so emphasized in accessibility guidelines. Bethesda tweeted an image full of text a while ago to comment on an issue with a contractor, and the alt text said "A statement made by Bethesda on this situation". That was it. It was utterly meaningless even though it (barely) met the qualifiers of 'short and descriptive' of what the image was about.

I imagine 'descriptive' does cover a lot of what I'm saying, I just think people have wildly different definitions for what 'short and descriptive' looks like. I prefer saying 'As long as necessary to properly convey the image without turning it into a novel'. Especially artwork really deserves elaborate explanations of what is visualized, in my opinion!

I'm curious to hear others' thoughts on this though. :)

cri86titanium

December 5, 2022
9:07am

Ooooohhh this is such a cool feature! I use both alt and titles in html coding when I do websites because I always try to think of text browsers as my web design teacher taught me, finding out it's something I'll be able to do with my images on RPR just fills my heart with happiness! :3 Thanks Kim!