Today, A lot of developers are conversant with the alt
attribute on images. I can say most of us know that it is one way of making webpages accessible but do we really understand the scope of the alternative text, when to make use of it, how to use it. I agree it is one step to being an accessibility advocate so that is why in this article, I'll be explaining in detail the alt attribute and how practicing it can improve web accessibility in a long run.
Truthful confession here, before I became really involved with accessibility I didn't understand the importance of having a descriptive text for all images on the web. I'm mostly guilty of leaving the alt
attribute blank. Now that I know better I can't keep it to myself which is one of the reasons I'm writing this article to share this new knowledge gained with everyone.
Alternative text or alt text as it is fondly called is a written text description for an image on the web. Alt text is really useful and can come in handy in any of these scenarios:
Writing good alt text for images is very important and shouldn't be sidelined. To show how important this is the Web Content Accessibility Guidelines document WCAG 2.1 have it has the first rule which shows that it's really important.
Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
Typically, when adding an image to a webpage, we use the HTML image element to represent the image and the alt attribute on the image tag to give a description of the image. Here's an example:
<img src="./burger.png" alt="A girl holding a hamburger.">
The above alt attribute describes the context of the image. In this case, if a screen reader is being used on this page. It'll read the alt text instead and the user gets a very descriptive context of the image used.
There are other things to consider when writing alt text this is just a primer to writing descriptive alternate text for images. I'll be going over the important concepts to take note of when using images on the webpages.
All images on the web must have alternative text that describes the function of the image.
There are seven concepts for using images on the web I'll be outlining each of them and they include:
<img src="./girl.png" alt="A girl smiling happily.">
The image illustrated above shows the emotion of a girl. The idea therefore, is to make the alternative text convey this information.
alt
attribute is not provided or left empty (alt="")
. The reason for this is to avoid assistive technologies such as screen readers from reading a redundant text to its users. Leaving the alt
attribute out entirely is not a good practice because some screen readers will announce the file name of the image instead. An example is shown below:<img src="./line.png" alt="">
search list
instead of a microscope
or print page
instead of image of a printer
. Having an empty alt
attribute won't be helpful too because you want to be able to notify users using screen readers to navigate your site that you want them to take an action at that point. Here's an example:<input type="image" src="search.png" alt="search this page">
<img src="text.png" alt="For sale: baby shoes, never worn.">
alt
attribute so they are ignored by screen readers. Here's an example:<img src="full-heart.png" alt="1.5 of 3 hearts">
<img src="half-heart.png" alt="">
<img src="empty-heart.png" alt="">
<figure role="group">
<img src="bar.png" alt="Bar chart showing population of animals in SA and LA zoos.">
<figcaption>
<p>The bar chart shows a population of the animals in South African Zoo compared to Los Angelos Zoo. With the number of giraffes, monkeys and orangutans compared in both zoos.</p>
</figcaption>
</figure>
area
elements. An example can be an organizational chart. Image maps are created using <img>
and <map>
elements. The text alternative is needed on both the img
elements and each area
element. The example below illustrates an organization chart with each node represented to identify an individual in the organization.<img src="orgchart.png"
alt="Board of directors and related staff: "
usemap="#Map">
<map name="Map" id="Map">
<area
shape="rect"
coords="176,14,323,58"
href="ā¦"
alt="Davy Jones: Chairman"
>
...
</map>
With all these images types listed, how do you know which one to use when implementing alt text. The Alt decision tree is a guide provided to help you make that decision. So when in doubt use the alt decision tree.
image of
or photo of
.alt
text. This can cause a weird pause when the screen reader is describing the image.alt
attribute alt=""
for decorative images. for example, the background image of a website because understanding the context used here is not required.In this article, I've explained in detail the benefit of using alternative text for images and how to go about using them in a different context. I'm happy you read this far and my ask therefore is not to only read this but also learn to practice it. I believe the web will become more accessible with a collective effort from everyone.