If a picture is worth a thousand words, how do you convey the same meaning to somebody who can’t see or understand the image? When it comes to website accessibility, that’s where alt-text comes in. Alt-text helps tell the same story to someone who may not be able to understand the imagery because of visual impairment or other disability.
Alt-text is an important part of website accessibility. Earlier in this series, we talked about the importance of website accessibility so that the content on your website can be understood by all audience members—including those who may have disabilities that require them to communicate in a different way.
It doesn’t matter what type of website you have—both businesses and nonprofits alike should ensure their website is accessible by all. The Americans with Disabilities Act (ADA) provides guidance on why web accessibility matters, and many have adopted the Web Content Accessibility Guidelines (WCAG) to ensure website accessibility.
Today, we’re diving into everything you need to know about accessibility and alt-text. Let’s talk about what alt-text is, how it can be used, give a few great examples and ensure your website is set up for success.
What is Alt-Text
Alternative text, often shortened to “alt-text” is a way of describing an image, graphic or visual on a webpage. For somebody who is visually impaired, they may be using a screen reader. Alt-text helps them understand what is in the image by reading the alt-text when the screen reader encounters an image on the page. Alt-text can also be displayed in place of an image in case the visual won’t load.
Accessibility is an important issue facing web designers and developers. If you are updating or running your company website without the help of someone who knows accessibility basics like alt-text, you could be unintentionally excluding some of your website’s visitors, missing key elements and opening yourself up to reputational and financial risk.
Tips to Writing Effective Alt-Text
To get started with writing alt-text, use this exercise: Imagine you’re describing an image while talking on the phone. How would you describe it? Make sure to give as much context as needed. Check out these tips to use along the way:
- Any text or word bubbles on the screen within the image or visual should also be written out. Screen readers wouldn’t be able to pick up the text in the image unless it is entered into the alt-text.
- Alt-text is not limited to a specific character count. Make sure to use as much context as possible without adding unnecessary details.
- While you may be tempted to load up your alt-text with keywords to help improve search optimization, this provides a negative experience and is known as “keyword stuffing.” This practice has a negative effect on both the person trying to use your alt-text to understand the image, and also on your keyword rankings.
- Sometimes you may be able to give a good alt-text description for one website user, while another may need more context. If needed, you can include links to a longer description with more context near the image outside of the alt-text description. That way, your website user can choose if they need or want to know more.
- Alt-text is not just for static images—it also works the same for graphs and charts. Coming up with the alt-text for an infographic, chart, or graph can be tricky. Remember to start by imagining that you’re describing it to somebody on the phone. Highlight the numbers and trends, and what story the chart or graph is telling in detail. If the data is complex, include a link near the image to the original data source or a text-based version on another page.
- Although there are no limits to what you can include for alt-text, it’s important to use only the necessary amount of text. Some screen readers may not be able to pause or start in the middle of the alt-text, which means a user would need to start from the beginning every time they want to review the alt-text. If the text is too long, this could create a frustrating user experience for your website audience.
See it in action
Let’s take a look at an example so you can see how alt-text works in action! Check out the below image and an example of the best alt-text and some that need adjustments.
Poor: Letterboard
Good: Potted plant and black letterboard
Best: A small pot of sprouts next to a black letter board reading: Difficult roads lead to beautiful destinations.
When you’re ready to ensure your website is accessible by all, we’re here to help. Firespring proudly offers accessibility consultations and we’d love to chat.
You’ll get a review of your website by an accessibility specialist. From there, we’ll supply a report to identify issues and provide recommendations to help improve accessibility.