Alternative Text for Images

Imagine this situation: all your web browsers suddenly stop working and do not display any images. On the websites, only some colors remain, but instead of beautiful, colorful graphics, you see text like this:

AU310296749DAG406843Q3Xe.jpg
XCE326G27gGoxv745jgh.png

Furthermore, the entire layout of the page has completely fallen apart due to these inconveniences. All sections appear one after another, but their positions on the page are not preserved. The menu bar is somewhat visible at the top, then in some strange rows, there is something that should appear on the left side according to your memory. Then there’s a larger header, so that must be the main part. But here too, there are plenty of these strange texts. So, how do you navigate on such a website?
You are probably wondering now: “What were you thinking, man? This never happens.”
And I’ll tell you this: you’re mistaken, my friend. This is exactly what many of my journeys on the web look like. I am a blind person, and this is my everyday experience.

As I mentioned in the article about header logic, screen readers work according to a certain logic. They read websites section by section, from top to bottom, and follow the direction of the text, which means first the top banner, then the left column, then the central one, the right one, and the footer.

Image Descriptions

Although it’s said that a picture is worth a thousand words, not everyone can understand its informational and aesthetic value. While the aesthetic aspect may be lost for blind individuals, the informational aspect can be compensated to some extent. All it takes is to add alternative text to images (Link to an interesting article on alternative text).
Of course, crafting good alternative text is somewhat of an art. However, I will try to provide you with some tips to make creating descriptions less complicated.

The basics

Some images are easy to describe and don’t require much effort. For example, an icon of a shopping cart can simply be labeled as “cart” or “add to cart,” which adequately describes its functionality.
The same goes for graphical menu elements. If they contain text, including that text in the alternative description is usually sufficient.
Navigation arrows, icons, and button images of this kind can be named in one word. If you lack inspiration, open any application with options listed in the top menu bar. Read and apply it to your website.

From General to Specific

Describing an image that includes a chart, infographic, or landscape is more challenging. However, there are still solutions. The simplest tip for describing such images is to think about what’s most important and convey that with one or a few short sentences.
Are you displaying a product from the front view? Describe it straightforwardly. Are you providing a close-up of the display? Describe it. Are you showing side buttons or sockets on the left side of a casing? Include that information in the alternative text. Here’s an example:

The image is from [source].

Alternative text: “Front of an electric oven. At the top edge, there’s a handle for opening the oven door. In the central part, there’s a glass window through which you can see the rack. On the right side of the door, there are three control knobs: temperature, heating mode, and timer. On the right edge, between two lower knobs, there’s a ‘Power’ indicator light.”

Why Include Image Descriptions?

Alternative text serves not only to improve user comfort but can also increase your sales or support understanding of a chart or diagram for someone who cannot see it.
People are diverse, and their information acquisition and analysis needs vary. For example, for a deaf person, absorbing written text may be easier when you provide an infographic alongside it. Additional text describing an image supports the needs of blind users or those with weaker vision.