When talking about techniques to improve accessibility, one topic that comes up quite often is alt (alternative) texts.
What is alt text?
Alt text, sometimes called alt descriptions or alt tags, is a short description in the form of an HTML attribute that we use to give context to an image when it cannot be viewed for some reason. The code below shows how you would add an alt attribute to an image tag in HTML:
<img alt="sample alt text">
Why is it important?
Having an alt text for your media files is important for so many reasons, some of them being:
Accessibility: users with some form of impairment who are not able to see an image would rely on tools like screen readers to describe what that image is.
User experience: when a user has a poor internet connection and is not able to load up an image, having an alt text that shows up, describing the image to the user massively improves the experience.
Search Engine Optimization: having an alt text is good for SEO because your image could easily come up in an image search, hence increasing traffic to your website.
How to write meaningful alt text
Be descriptive but concise: according to web accessibility initiative tips, your alt text should be the most concise description possible of the image’s purpose.
Try to keep the description to no more than a sentence or two. For images that need to have a longer description, consider using the long description technique for complex images.
Avoid using phrases like "image of" or "picture of" because tools like screen readers already announce the presence of an image.
Don't include copyright and photo credit information as part of the alt text.
Provide context: context in an alt text is very important. The same image can have a different description depending on the content of the page. For example, an image of a person at a football field can have an alt text of "Man waiting at the football field for his teammates to arrive" or "Man wearing the new bike boots for his first training session" depending on the content of the web page.
Not all images need an alt text. Some images are meant to be for decorative purposes only and, as such, do not need to have alt texts. To mark an image as decorative so it's not read out by the screen reader, you need to pass an empty alt text like this:
<img alt="">
- For images used as links or buttons (functional images), the alt text should be what the link does rather than describing the image. An image of a printer should have the alt text "Print this page" which indicates the function of the image rather than what the image looks like.
In summary, crafting meaningful alt text is a simple yet powerful way to enhance accessibility when executed correctly, but it can also lead to accessibility issues if not approached thoughtfully. The process of composing alt text isn't one-size-fits-all, as it hinges on various factors, including the image's nature, the website's content, and its functionality. Incorporating well-crafted alt text into your application significantly enhances the overall user experience.
Top comments (0)