What Is the Alt Attribute?
The alt attribute (alternative text) is set on <img> elements and provides a text alternative when the image cannot be displayed. It plays a vital role in situations ranging from network failures and broken images to screen reader access for visually impaired users.
Search engines like Google also read alt attributes to understand image content. Setting descriptive alt text helps your images appear in image search results, directly increasing search traffic.
Why Does Alt Text Matter?
There are three main reasons alt text matters: ① increasing traffic from Google Image Search, ② compliance with accessibility laws (ADA, WCAG, and Japan's Act for Eliminating Discrimination against Persons with Disabilities), and ③ helping Google better understand your page content.
+12%
Increase in image search traffic from proper alt text
~50%
Sites with at least one image missing alt text
23%
Share of web traffic from image search
Google Image Search accounts for approximately 23% of all web traffic. Studies show that sites with properly set alt attributes see an average 12% increase in image search traffic. Image optimization is an essential pillar of any SEO strategy, not just text content.
5 Rules for Writing Good Alt Text
Describe the image content specifically
Instead of 'a photo of a meeting', write 'three engineers reviewing code in front of a whiteboard'. Help people who can't see the image visualize exactly what it shows.
Include keywords naturally
Work relevant SEO keywords into the description naturally. For product images, include the product name, model number, and color — this increases visibility in image search.
Keep it concise (under 125 characters)
Most screen readers stop reading at 125 characters. Be specific but brief. Avoid redundant phrases like 'image of' or 'photo of' — these add length without adding meaning.
Use alt="" for decorative images
Decorative elements like dividers, background textures, and design flourishes should have alt="" (empty string). This tells screen readers to skip the image without disrupting the user's experience.
Use descriptive file names too
Name files like 'tokyo-office-team-meeting.jpg' rather than 'img001.jpg'. Meaningful file names help Google understand the image context alongside the alt text.
Good vs. Bad Alt Text Examples
→ No information about who or what is happening. 'photo of' is also redundant.
→ Conveys the situation, occupation, and tool clearly.
→ Provides no information about what the chart shows.
→ Includes chart type, topic, and key data points.
→ Describing a decorative image forces screen readers to announce irrelevant content.
→ Empty alt declares it as decorative. Screen readers skip it entirely.
4 Common Alt Text Mistakes
Missing alt attributes on all images
The most common mistake. Without alt text, screen readers read out the filename. It also hurts image search indexing. Build a habit of adding alt text every time you upload an image to your CMS.
Keyword stuffing
Writing alt="SEO SEO optimization SEO checker SEO tool SEO audit" violates Google's guidelines. It risks penalties and creates a terrible experience for screen reader users.
Starting with 'image of' or 'photo of'
Phrases like 'photo of a woman' or 'image of a graph' are redundant. Screen readers already announce 'image:' before reading alt text, so these additions waste character space.
Adding descriptive alt to decorative images
Setting alt="decorative divider line" on a purely decorative element forces screen readers to announce irrelevant content. Always use alt="" for decorative images.