.png)
Take a moment to consider how you got to this blog post. You probably clicked a link in a social media post or the AOE eblast, or perhaps you were visiting our website and decided to check out the blog page. You see the AOE logo at the top of the website, notice a cheerful header image of a vintage yellow typewriter and read the text in the header that lets you know you’re in the right place. You scroll down to see a column of blog posts with colorful thumbnail images and interesting titles—then you find this particular blog in the listing, are intrigued by the title, teaser text or image, and decide to click. Most users who make their way to this blog will follow the same route you did, relying purely on visual cues to get you to where you wanted to go.
This kind of simple, frustration-free access is easy to take for granted. After all, digital content is primarily created by—and for—sighted people. However, that means that users with visual impairments, ranging from low vision to total blindness, are often left out of the equation. In this digital age, creating content that is accessible to all users is essential. One critical aspect of digital accessibility is alt text. Whether you're a blogger, marketer, or web designer, understanding the importance and best practices of alt text can dramatically improve your content's reach and usability.
What is Alt Text?
Alt text, short for alternative text, is a brief description of an image that appears in the HTML of a webpage. Its primary purpose is to describe the image to users who cannot see it through use of screen readers, an assistive technology that can either verbally convey the description to its user or depict it via a Braille display.
Why is Alt Text Important?
AOE believes that organizations have responsibility to create content that is accessible to all users, in order to provide everyone with equitable access to information. Without accessible measures, such as alt text, users encounter barriers that cut them off from experiencing the content that we take for granted, leaving them feeling frustrated and isolated. As content creators, we need to do what we can on our end to remedy these issues, such as adding alt text to the visuals on our websites and in our digital content.
Additionally, digital accessibility benefits every user, not just those with a disability. If you’ve ever tried to visit a website using a poor internet connection, alt text displays in place of an image that fails to load—as long the website designer made sure to include it.
Lastly, while search engines can’t “see” images, they can scan the text on your website, including any alt text you may have added. By including relevant keywords in your alt text, search engines can better understand the content of your website, potentially improving your SEO and moving your site up in search engine rankings.
When to Use—and Not Use—Alt Text
Alt text should be used for informative images (which convey concepts or information), functional images (which direct a user to complete an action), images of text, complex images (such as diagrams) and any other image that provides additional context to the information presented in the text of your website or social media post.
Though alt text is an important component of creating digitally accessible content, it’s not required for every single image you include on your website. If unnecessary or redundant alt text is added to an image, it can create a disruptive experience for people relying on screen readers trying to access information. Some exceptions include:
Purely aesthetic images that provide no information, have no functionality and are just there to look nice, such as a stock photo of people shaking hands used as the header image for an organization’s “Meet Our Team” page, or a decorative image used solely to break up a large section of text
Images depicting content that is already described in the surrounding text, such as an icon of an envelope next to a link that says “Email us” or a photo of an organization’s board president with a text caption below it that reads “Jane Smith, Board President”
If you determine an image doesn’t require alt text, don’t just leave the alt text field empty—screen readers may go ahead and read the file name anyway. Instead, add null attributes to the alt text field by entering two quotation marks (“”) so the screen reader knows to skip the image altogether.
It can be difficult to determine what does and doesn’t need alt text until you get more familiar with the guidelines, so the World Wide Web Consortium (WC3) has a helpful alt text decision tree to help you decide how to proceed.
Best Practices for Writing Alt Text
When it comes to writing alt text, there are several things to keep in mind:
Be descriptive, yet concise: Try to keep your alt text under 125 characters. This should give you plenty of space to provide the image’s context while keeping you from being too wordy. An exception to this rule is if there is text in the image that needs to be transcribed.
Include relevant keywords: If appropriate, incorporate keywords into your alt text in a natural way. Avoid using too many, otherwise your alt text isn’t helpful to users, and it may even have a negative impact on your SEO.
Identify the type of image: Screen readers will already inform users that an image is present, so there’s no need to begin your alt text with “Image of” or “Picture of”. However, you can specify the style of image it is, such as a photograph, a hand-drawn illustration, a logo and so on.
Use proper punctuation: Write your alt text in complete sentences with a period at the end, which helps screen readers identify where to pause. Avoid the use of quotation marks in your text, which can make it not render properly. If you are using an acronym in your alt text, add a space between each letter.
Avoid irrelevant language and assumptions: Focus on providing an accurate and straightforward description of the visual without editorializing or using unnecessary descriptors. Stick to observable features instead of inferred emotions (ex: describing the subject as “smiling” instead of “happy”).
Provide direction where needed: The alt text of an icon should be equivalent to the information that the icon is meant to represent. Use the alt text to describe what happens if the icon is clicked to provide users with useful contextual information.
Though it can seem overwhelming to remember all the recommendations and best practices for alt text, once you have a bit of practice, it’ll become a natural part of your content creation and website design process. Alt text is an easy way to improve the online experience for a group of people whose needs are often ignored when it comes to digital content, so make sure your organization is doing the right thing and taking this small (but significant) step toward equitable online access for all.
Reach out to AOE if you want to get started improving your organization’s digital accessibility today!
Additional Resources