What is Alt Text?
Alt text (aka alt attributes or alt descriptions or alternative text) are descriptions for images on a website page. It is used within an HTML code to describe the appearance and function of an image.
Why is Alt Text Important?
Alt text is essential for anyone creating online content. It is helpful for users because it allows text to be read aloud using assistive technology like screen readers, speech input software, and speech-enabled websites. Also, alt text will replace an image if the file isn’t loading.
Another great reason to use alt text is that it is important for search engine optimization (SEO) and can dramatically improve a website’s rankings.
What does alt text look like in HTML?
Image Example:
The alt text comes before the tag: “alt=”
What the alt text looks like in an HTML code snippet:
<img
src=”European-Hare.jpg”
alt=”A brown hare crossing the dirt road.”>
How to add alt text to images on WordPress, Shopify, Magento, and Wix
You’ll be happy to know you don’t need to touch HTML code when using these e-commerce platforms because it is already included in the software. This makes it easier to write alt text!
Simply hover over the image thumbnail and click “Edit.” There should be an option to write alt text. For instance, Wix calls it “Title (Alt Text).”
Source:Wix
Writing Alt Text for Different Types of Images
- Basic images
Images that have little meaning to them get a basic description. Keep it short and to the point. However, don’t just write one word. Alt text is usually 125 characters or less.
Source: fscj.edu
- Text in images
For a picture that has text in it, you can write that word-for-word in the alt text.
Source: Wix.com
- Decorative images
Decorative images don’t add information to a page’s content and only make it more visually attractive. Use null (empty) alt text, which tells assistive technologies to ignore the photo. It should look like this: alt=””
Source: Accessible360
- Functional images
Examples of functional images are interactive buttons and links. The alt text for the image should describe the action (“search,” “home,” etc.).
Source: ucsc.edu
- Complex images
Complex images are graphs, charts, maps, diagrams, and illustrations. These images are difficult to describe in one or two sentences. For the alt text, write what is the most important for users to read so they can understand the gist of the content.
Source: Microsoft
How to Write Alt Text
There are three ways to write alt text: short description, no description, and long description.
If there’s nothing important in your image, don’t write alt text. Decorative images, visual stylings like borders, or images already described in the content body don’t need alt text. But take caution – a lot of websites get sued for lack of Alt text by ADA plaintiff lawyers. So, where possible, add Alt text.
Graphs, maps, and diagrams need longer descriptions. These can be hard to comprehend by many people, such as blind people and those with learning disabilities or low vision.
How do I write alt text for e-commerce sites?
Avoid writing alt text like this: “big clearance trucker hat buy today.” This might trigger a spam alert.
Example of a well-written alt tag for e-commerce websites:
<img =”trucker_hat.png” alt=” foam trucker hataHat for men green”>
The Best Tips for Writing Alt Text
- Alt text is 125 characters or less
- Clear and simple language
- The most important information comes first
- Don’t include ‘photo,’ ‘picture,’ or ‘icon’ as this is redundant
- Include a keyword but don’t go overboard and write too many (known as keyword stuffing)
- Be specific about the type of image, if it’s a painting, writing on a chalkboard, illustration, etc.
Common Mistakes
- Not writing alt text (especially if the image is important)
- Creating alt text for every single image on the page (above, we explain when to include alt text)
- Descriptions that aren’t helpful
- Failing to explain complex images
Get an Expert ADA WCAG Compliance Consultation with EcomBack
When you work with us, you can avoid ADA-related lawsuits. EcomBack designs a compliant website for your business. We have experts on our team that are well-informed in ADA compliance standards and can help your business get on the right track toward accessibility.