Alt Text for Screen Readers and Accessibility
One important component of writing on the web is accessibility. Usability.gov says accessibility focuses on how a disabled person accesses or benefits from a site, system, or application and should be considered throughout the design and development process.
Making accessibility a priority ensures that all potential users have a decent user experience and are able to access your information. When designing for all, you must consider how a disabled person may use your site. Some readers only need contrast. Others may need to control your site with their keyboard, so a logical and navigable site is what’s needed. While others may use screen readers.
“Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer or braille display. A screen reader is the interface between the computer’s operating system, its applications, and the user.”
American Foundation for the Blind
If you would like to see a screen reader in action, the Goodwill Industries of Arkansas website has an accessibility widget that allows users to use what they need while browsing the site.
When users rely on screen readers, the website design has to allow for this. One major way to design for the use of screen readers is to include alt text or alternative text in the html. Alt text is used to describe the appearance and function of an image on a page.
When a screen reader user visits your site, the alt text will be read to ensure users understand the image. Alt text is also displayed on sites when images cannot load. Not adding alt text to your images will result in screen readers saying image not found or the file name.
What does this look like in action?
Okay alt text:
<img src=”bird.png” alt=”bird”>
Better alt text:
<img src=”bird.png” alt=”blue and yellow macaw”>
Best alt text:
<img src=”bird.png” alt=”blue and yellow macaw riding scooter”>
Okay alt text: <img src=”womanwithphone.png” alt=”woman holding a phone”>
Better alt text: <img src=”womanwithphone.png” alt=”woman holding flip phone”>
Best alt text: <img src=”womanwithphone.png” alt=”woman with puzzled expression looking at flip phone”>
How do we write great alt text?
- Describe the image as specifically as possible.
- Keep it short. Most screen readers cut off after 125 characters.
- Don’t use images as text.
- Don’t include “image of” or “picture of” in alt text.
- Don’t include copyright or any extra info.
When deciding what your alt text should say, you need to consider what you are conveying with the image. Don’t waste characters describing irrelevant items within the image. It could confuse users when trying to relate the images to the rest of the page.
In the following image, you could put the alt text a few different ways depending on what you are trying to convey.
You could say it is a man standing in front of a mountain with snow on the ground, or a man in front of a mountain in Calgary in the snow. But, if this image is to show Jack Black in Calgary during the filming of Jumanji the next level, neither of those alt text attributes convey that message. What would be needed is alt=”Jack Black in the snow in Calgary during the filming of Jumanji: The Next Level”.
Accessibility is one of the most important elements in website design. We have to design for anyone who could visit our site and whatever they need to make their visit more pleasant, like screen readers. Then we must keep in mind that our alt text has to be on point to convey the message we are trying to convey with our images. An accessible website makes for happy users.
Sources:
Usability.gov: https://www.usability.gov/what-and-why/accessibility.html
https://accessibility.psu.edu/images/alttext/
Image Sources:
Jack Black: https://www.vanityfair.com/hollywood/photos/2019/12/jumani-the-next-level-shenanigans
Woman on Phone: https://otod.wordpress.com/2011/08/25/how-to-silence-your-cell-phone-ringer-for-old-people/
Macaw on Scooter: https://www.discovermagazine.com/planet-earth/having-a-bird-brain-is-actually-a-compliment
Thank you! Thank you! Thank you! I never know what to say with alt text. I always think to much or not enough. The examples help to better understand what is needed and what is appropriate. This seems so simple, but until you try, you don’t realize how confusing writing alt text can be.
Alt text is probably the most forgettable part of HTML for me. When building code it tends to be put on the back burner until the last minute even though it is such a critical part of HTML. I always have to remind my self to go back and add it in.
This! Accessibility is insanely important; developers and content writers absolutely have to know about it to successfully reach as many people as possible.
You do a fantastic job of explaining alt text AND giving examples of alt text at varying levels.
Great post!
I love the advice to not include tags such as “image of” or “picture of”, because I would intuitively think to include that as a descriptor. For someone new to web design and coding, that is an important tip!
Thank you for including a proper definition at the beginning about what “accessibility” means, because I usually think of it in terms of whether or not someone can access the Internet, not the roadblocks they encounter if they have a disability. After reading this article, I realized that I never really thought much about improving accessibility in my own created content, so I started Googling–I had no idea that websites found to be “significantly” inaccessible can actually be found to be in violation of Title III of the Americans with Disabilities Act!! Here’s the link to the article, it was very informative and important for web designers to know, for sure!
https://medium.com/@krisrivenburgh/the-ada-checklist-website-compliance-guidelines-for-2019-in-plain-english-123c1d58fad9
This is such an important information, and it is essential for those just learning to how to code that ‘alt text’ be a fundamental building block as part of the foundation to learning. I really enjoyed your article. Other significant design elements to consider for those with disabilities is our color choice, choosing to be inclusive of individuals who are colorblind. For instance, pink hues on red/pink background do not display well, and these are often overlooked on graphs and such. You have provided some really great references, as well.
I absolutely love all of your examples! You are taking me on a trip down memory lane. One of the first tasks that I had to complete at my old job was to comb through our website and check, write, and rewrite alt text for images. Fun times! I definitely think that someone using a screen reader would love to hear the details of the image instead of hearing something super basic or not hearing anything at all. Final thought: Your Jack Black image example makes me smile. 🙂