Any help on writing alt text?

[Finel]

Hey!

So as part of my effort to make my site at least somewhat accessible I added alt text to all images.

Problem is that I worry that the alt text might be not the best written or even confusing. I am not the best at describing stuff.

So I’m here to ask if any of you have tips or resources on writing good alt text?

(I have a hard time especially with bottoms for some reason)

[TheNothingMonster]

That's an interesting question! Making alt text is simple yet can be rather confusing at first.

First of all, we have to define what an alt text is: Alt text is alternative information provided when an image is not loaded (could to slow internet connection, some short of error or due to the usage of a screen reader).

MDN Web Docs explains how to think of alt text very well:

Think of it like this: When choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.

The alternate text is displayed in the space the image would occupy and should be able to take the place of the image without altering the meaning of the page.

Not all images require the same kind of descriptions. For instance, if your image is decorative, it doesn't need a highly detailed alt text (or even no alt text at all). On the other hand, if your image is important or displays something along some text (like article images), it would require some short description. Keep in mind that you do not have to drown in details and whatnot, as long as the general idea of the image is presented. I'll give you some examples:

Under the spoiler, we have an image of Mount Everest. Perhaps I'm writing an essay on it and I want to add a nice image along my text.

Spoiler

[close]

As alt text, I would write this: "Picture of Mount Everest in the sunset."
Simple as that. No need to write more as long as the user understands what the image is about in general.

If I had this image...

Spoiler

[close]

... I would write: "Selfie of a man and a horse. The horse is covering the man's face!"
Again, the general idea is clear. No need to describe more than that.

If I had a series of decorative images such as 88x31 buttons, stamps, blinkies, etc, I would just leave the alt blank (alt="") since they are not that significant to the site's/page's meaning.

I would highly recommend you to check out MDN Web Docs' complete explanation of alt text for more references.

If you want to add further descriptions to some of your images, you could use a variety of methods! For instance, you could add a <figure> & <figcaption> tag or use the <details> & <summary> tags to display further details optionally. Then again, not all images require such descriptions.

I hope that was clear. If I was wrong somewhere, correct me!

[Finel]

I really appreciate the response and all the links!

I just wanna ask about on thing-

If I had a series of decorative images such as 88x31 buttons, stamps, blinkies, etc, I would just leave the alt blank (alt="") since they are not that significant to the site's/page's meaning.

If I had a botton that I wanted to pass some information, or a page of graphics where the buttons/Stamps/Blinkies were the content of the page- in that case, one would include alt text for them?

[TheNothingMonster]

If I had a botton that I wanted to pass some information, or a page of graphics where the buttons/Stamps/Blinkies were the content of the page- in that case, one would include alt text for them?

Yeah, I'm pretty sure that would be fine! Just nothing too insanely detailed, of course.

[Memory]

There are many different reasons to use alt-text, and unfortuneatly not everyone can be pleased at the same time. I go for optimising the text browser experience rather than the blind user experience, resulting in shorter alt-text, cluttering the lines of the text browser less.

An example for my preferred alt-text:

Code

alt="(Photo, 37KB: Reached the finish line.)"

I prefer to put the alt-text in brackets, because that differentiates the image description from the regular text quite well. The word "Photo:" or "Animation:" is quite helpful for structuring as well. Because usually, the point of having an image is to show something graphical, else it could be described with words.
Adding the file size is a stone age thing which has not much purpouse nowadays. It's rather a seal of quality for the "efficency ego".

For navigation buttons, I'd put the alt-text in brackets as well. Makes it look like a button really even in the text browser.

For some fluff images it really make no sense to have an alt-text. Though in that case you want to have a blank alt-text (alt="") rather than no alt-text at all, because in the case of the text browser Lynx, it would display the file name of the unnecessary file then when no alt-text is given.