One of these days I saw a Tweet from 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. 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 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).
<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, second, alternative text should be succint: avoid unnecessary words.
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.
... 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.
Code snippet:
<a href="https://dev.to">
<img 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.
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.
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's article about images, it also has a decision tree which really comes in handy. The a11y (stands for accessibility) project also has guidelines and tips, not only for alt text, but for a lot more accessibility topics.
Top comments (0)