Effective alt text
Tags: ux, inclusion, a11y
Published: 2021-01-11 16:51:14

One of these days I saw a Tweet from [Cruzeiro](https://twitter.com/cruzeiro) (The soccer team that I cheer for) which was a picture showing the lineup for the next match. When I was reading the comments, I saw an interesting suggestion: "What about writing down the line-up as well? It'll be easier for blind people, because screen readers can't handle pics very well". Twitter supports a 1000 character alternative text and is more than enough [#PraCegoVer](https://mwpt.com.br/criadora-do-projeto-pracegover-incentiva-descricao-de-imagens-na-web/). However, writing proper `alt` text is still a challenge.

## Why should I care for it?

For me, being a front-end developer goes beyond coding: it's also about UX, which has a lot to do with accessibility. "Alt" text helps people who use screen readers to "see" the images by providing a detailed description of what can be seen in the photo. It's also useful for those who have a poor Internet service and can barely load a picture. There are [285 million people](https://www.who.int/en/news-room/fact-sheets/detail/blindness-and-visual-impairment) around the world who are visually impaired and the internet shouldn't be blind to them.

Also, when creating a Website, SEO is really important. Alternative text describes an element textually, which is a better information for search engines, resulting in a higher rank for the pa. 

So, without further ado, let's take a look at some tips for writing better alt text!

## Straight to the point
Describe what you are seeing, not what you think about who or what is being shown, use as few words as you can and try to stick to the limit of 125 characters, which is where screen readers usually cut alt text. Still, there are cases where a long description is needed (charts, for example), and that's when `longdesc` comes in: a URI containing a long description of the non-text content (This feature is not yet supported by all screen-readers, though).
```html
<img src="chart.gif" alt="a complex chart" longdesc="chartdesc.html"/>
```

## Avoid keyword stuffing
This tip is a sequel of the last one. Remember that the main purpose of describing the content of a pic is to improve accessibility. Coincidentally, it is also used for SEO optimization, but that doesn't mean it should be full of irrelevant keywords: first, [Google can detect keyword-stuffing](https://developers.google.com/search/docs/advanced/guidelines/irrelevant-keywords), second, alternative text should be succint: avoid unnecessary words.
<figure><img src="https://dev-to-uploads.s3.amazonaws.com/i/wic852t2odom2orf8zkc.jpg" alt="Brazilian national soccer team player, Tostão, looking to the left."/><figcaption>Tostão is one of the greatest soccer players of all time. </figcaption></figure>
**Alt with keyword-stuffing:** _brazilian, soccer, football, soccer player, Brazilian national team._
**Alt without keyword-stuffing:** _Brazilian national soccer team player, Tostão, looking to the left._

## Some images are not even worth a word...
Decorative photos doesn't carry relevant information to the text, thus, it don't require alternative text. Icons on buttons and list elements, that usually have a label along with it, are a good example of no-description-needed pics. In those cases, use an empty `alt` attribute.
<figure><img src="https://dev-to-uploads.s3.amazonaws.com/i/uthgh44aaa12jbm9z4cf.png" alt="iPhone app menu with Home, About and Log-in menu options, each one with an icon followed by a text."/>
<figcaption>An app menu. Note that the icons are only for decoration.</figcaption></figure>

## ... And some can be useless without them.
Pics used as links or buttons are called **functional images** and alt text is essential for them. Think about browsing through a page using a screen-reader and, suddenly, you run across a picture with no seemingly clue that it takes you to the home page. How would a user guess what to do with it? In those cases, `alt` should describe  picture functionality rather than its visual.
<a href="https://dev.to"><img width="100" src="https://dev-to-uploads.s3.amazonaws.com/i/y7iccxquxqw4ueq9ruq3.jpg" alt="Dev.to home"/></a>
### Code snippet:
```html
<a href="https://dev.to">
  <img width="100" src="https://dev-to-uploads.s3.amazonaws.com/i/y7iccxquxqw4ueq9ruq3.jpg" alt="Dev.to home"/>
</a>
```

## "Image/Photo/Picture of...", You don't say
When going through a page, screen readers can tell whether the highlighted content is graphic or not, so keep away from words like the ones shown in the title. Reducing redundancy is a good UX practice.
<img src="https://dev-to-uploads.s3.amazonaws.com/i/192ykwrgc4dsufav27o9.jpg" alt="Blond woman on the snow holding a red fox on her shoulders."/>
### **Alt:** ~~Picture of a~~ _Blond woman on the snow holding a red fox on her shoulders._

## `figcaption` does not replace `alt`
As it was said before, alternative text gives a functional description about the image, providing a summary of what is being pictured by it. The caption, on the other hand, can be an editorial description: information that can't be noticed only by looking at the photo.
<figure><img src="https://dev-to-uploads.s3.amazonaws.com/i/7i5jfo7okyrshala5oht.jpg" alt="Cruzeiro soccer player, in a blue jersey, celebrating, waving his hands and running."/>
<figcaption>Arrascaeta was a game-changer in Copa do Brasil finals, against Corinthians, in 2018.</figcaption>
</figure>
### **Alt:** _Cruzeiro soccer player, in a blue jersey, celebrating, waving his hands and running._
### **Caption:** _Arrascaeta was a game-changer on the Copa do Brasil finals, against Corinthians, in 2018._

## What now?
This text covers some tips to improve alternative text writing, there is, however, much more to look for in this matter. For more information, you can take a look at [W3C](https://www.w3.org/WAI/tutorials/images/)'s article about images, it also has a [decision tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) which really comes in handy. The [a11y](https://www.a11yproject.com/) (stands for **a**_ccessibilit_**y**) project also has guidelines and [tips](https://www.a11yproject.com/posts/2013-01-14-alt-text/), not only for alt text, but for a lot more accessibility topics.