A brief description of alt text, its benefits, and when to use it.
What is an alt tag, you ask?
In it’s simplest terms, an alt tag, or alternate text, is the text that is entered to describe non-text media (like an image, video, etc) on a website. We’ve all seen the benefits of having this descriptive text.
Have you been in an area with no or low wifi, and you’re using your mobile device to search for something online. You see that broken image icon and text next to? That text that is next to the broken image icon is usually the alternate text that has been added to the image. It is used to describe the contents of the image. If I show an image of yours truly, I could say “Shawna, owner of S. Barnes Designs, LLC”. Or “Middle aged white female with curly hair and glasses”. Or, I can combine the two so that people know what I look like by using the description of my physical characteristics and my title. Alt text, caption, title, and description are all elements you have to describe your image online, but they each serve a different purpose. The alt text should not be repeated as the caption or description.
Did you know that you have the option of turning images off from loading as well? This helps with slow internet but also those that may find too many images distracting. The alt text will show in the place of the image so the user still gets the same information without all the distraction. Not only is it helpful for every day users navigating slow internet, but it enables those that use screen readers to experience one’s website as similarly as possible to sited users. The alt text is what a screen reader will read back to a person that uses the technology for any reason. Typically, a person with a vision impairment is one who would use the screen reader assistive technology. Another happy benefit of alt text, when done properly, is it will boost your SEO. You need to be careful about keyword stuffing, as the bots at Google and other search engines can detect keyword stuffing. But good alt text can help your search engine optimization efforts.
Do all images need alt text?
Negative. If the image is decorative and doesn’t provide important or contextual information to the user, it does not need alternative text. However, you do need to tell screen readers that the image is simply decorative. Why? Because if there’s no alt text, the reader will read back the title of the image to the user which can be just as confusing if not more so. Logos? Generally speaking, yes. Even if it’s simply to state that the image is your business logo. Icons? Sure do. You have to keep in mind that you want a non-sited user to know where they will be navigating to. If you have a social media icon as a link for example, the alt text could be “Facebook link”.
From a digital accessibiity perspective, alt text is one of the things that gets left out the most or is done improperly. It is an art to craft a short, succinct, but descriptive alt text so that screen reader users will understand the point and context of the imagery used. Many websites are built by small business owners who are trying to boot strap it and do it themselves. Doing they best they can with what they know. But as my mama always said, when you know better, ya try and do better. Designers aren’t taught much about digital accessibility in formal education. They/We get thrown to the wolves and only learn about web accessibility by happening upon it by mistake, taking professional development classes, or heaven forbid, the business gets sued for discrimination because its website was inaccessible. Digital accessibility, including the use of alt text, improves the user experience for everyone using your site; not just the disabled users. Digital accessibility is necessary for some but beneficial for all.