Alternative Text
Images and other visual media on websites need text descriptions (called "alt text") so people who can't see the visuals can understand them. Alt text is used by screen readers to describe images for people who are blind or have different sensory or learning needs. The type of description depends on what the image is for — whether it’s clickable, gives important information, is complex, just for decoration, or part of a video.
Good alt text clearly explains the image's content and purpose, making the website easier for everyone to use. It also helps search engines understand the page, which can improve a website's ranking.
Descriptive Versus Specific
Bad Alt Text
alt="Lighthouse"
This line of alt text technically follows the "be descriptive" rule, but it's too general. The image does show a lighthouse—more specifically, Bodie Island Lighthouse on North Carolina's Outer Banks. It's important to include specifics like that in alt text. Search engines need them to properly crawl the image, for example, if it's on a web page about North Carolina lighthouses.
Good Alt Text
Better alt text for this image might be:
alt="Bodie Island Lighthouse on North Carolina Outer Banks"
Depending upon the subject of your content, you might also mention the scenic landscape.
Who Benefits
People who are visually impaired, including those who are blind or have low vision, may struggle to perceive images on a webpage. To ensure they have equal access to information, images must include descriptive text alternatives. These descriptions help screen readers and braille displays convey the image's content or purpose to users who can’t see it.
Best Practices for Writing Alternative Text
- Describe the image in its context, and focus on the details the image adds to the text.
- Keep alt text concise. Be specific, but try to make the alt text fewer than 150 characters. If you need more than a sentence, for example when an image includes graphs, formulas, or other important complicated text, move the extra information into the visible text of the page.
- Leave out phrases like "image of" or "picture of" in the description. They are repetitive because screen-reading tools identify images from the HTML source code.
- Avoid repeating information that's already covered in a caption or adjacent heading.
- Don't cram in SEO keywords. Search engines crawl alt text but dislike keyword stuffing.
- Use an empty alt tag (alt="") for decorative images that don't contribute to greater understanding of the content. Using the empty alt tag hides decorate images from screen readers.
If you need more than one sentence to explain, put the extra details in the main content of the page. For example, you can offer a table version of a chart or write a longer caption to explain the complex parts of the image. This helps people using screen readers understand the information in smaller, easier pieces and also allows readers with low vision to access a text version of an image that might be hard for them to see.