In today’s visually driven digital landscape, images are everywhere. They enhance understanding, add aesthetic appeal, and break up large blocks of text. However, for a significant portion of the population, these visual elements remain inaccessible. This is where the crucial role of image alt text comes into play. More than just a technical requirement, well–crafted alt text is a fundamental aspect of inclusive web design, ensuring that everyone can experience and understand the content presented online.
The purpose of image alt text
The primary need for alt text stems from its ability to provide a textual alternative for visual content. This is particularly vital for individuals who are blind or visually impaired and rely on screen readers to navigate the internet. Screen readers are software programs that read aloud the text content of a webpage. Without alt text, these users encounter a void where an image should be, missing out on crucial information or context. Beyond accessibility for the visually impaired, alt text also benefits users with low bandwidth or unstable internet connections. When images fail to load, the alt text provides a placeholder, giving the user an idea of what they are missing. Furthermore, search engines utilise image alt text to understand the content of images, which can improve a website’s search engine optimisation (SEO) ranking.
How does it work?
So, how exactly does alt text work? When a webpage is coded, developers can add an alt attribute to the image tag. This attribute is where the descriptive text is placed. When a screen reader encounters an image, it reads aloud the text contained within the alt attribute. Similarly, if an image fails to load, the browser will display the content from the alt attribute in its place. Search engine crawlers also examine this text to understand the image’s relevance to the surrounding content and the overall topic of the page.
How to compose effective image alt text
Composing effective image alt text is an art form that requires careful consideration. The goal is to provide a concise yet informative description of the image’s content and its relevance to the surrounding text. Here are some key guidelines for writing good alt text:
- Be descriptive and specific: avoid generic terms like “image” or “picture”. Instead, describe the key visual elements of the image.
- Keep it concise: aim for brevity, ideally under 125 characters. Screen readers can become cumbersome with lengthy descriptions.
- Focus on context: the alt text should be relevant to the surrounding text and the purpose of the image on the page.
- Include relevant keywords: incorporating relevant keywords can improve SEO, but prioritise accuracy and clarity over keyword stuffing.
- Avoid redundancy: don’t repeat information that is already present in the surrounding text.
- Describe the function of functional images: for images that are links or buttons, describe their purpose (e.g., “Submit form button”). However, don’t repeat information that is provided elsewhere within a nested element, for example if the button element explains the button submits the form, there is no need to provide the same information again in an alt attribute, because a screen reader will repeat itself.
- Omit decorative images: if an image is purely decorative and doesn’t convey any essential information, leave the alt text blank (
alt="").
An example is better than guidelines
For example, imagine an image of a golden retriever sitting in a park with a tennis ball at its paws. I’m sure an image like that comes to mind quite easily for most people reading this article…! A good example of image alt text for this image would be: “Golden retriever sitting on green grass in a park, looking at a yellow tennis ball at its paws.” This description is specific, concise, and provides relevant information about the image’s content. Of course, this image might not seem to have any context to the article it is used with, in which case you might need to provide the relevance of the image: “An example of image alt text: a golden retriever sitting on green grass in a park, looking at a yellow tennis ball at its paws.”
Conclusion
In conclusion, image alt text is not just a technicality; it’s a crucial element of accessible and effective web design. By understanding its purpose and adhering to best practices for its composition, we can create a more inclusive online experience for everyone, ensuring that visual content is accessible and understandable regardless of ability or circumstance.
Further reading
Redcentaur services: accessibility in web design
The compelling case for website accessibility
The benefits of an accessibility strategy
Website accessibility: a simple guide to stop excluding visitors
Alt text or description: ensuring image accessibility on the web
About the author…
Glenn has been a web developer and graphic designer since the early 1990s. He has followed the development of HTML, JavaScript and CSS from the beginning and has caught on to newer technologies, such as PHP.
Never resting, Glenn tries to keep abreast of new developments in his areas of expertise and is always keen to pass on his knowledge to help the web and graphic design community to improve user experience.
Glenn set up Redcentaur to offer easy access to the internet for small businesses and individuals, without the cloud of mysticism that surrounds internet technology. The stated objective of Redcentaur is to demystify the web for the uninitiated by offering easy-to-use, end-to-end web solutions and hosting at accessible prices.
