What is Alt Text In SEO? A Complete Guide with Examples

Alt text, short for alternative text, is a HTML attribute that provides a text alternative for images on websites. It describes the appearance and function of an image to those who cannot fully see it.

Alt text plays a vital role in web accessibility, search engine optimization (SEO), and improving user experience. This comprehensive guide will teach you everything you need to know about alt text and how to use it effectively.

What Does Alt Text Do?

Alt text serves multiple crucial functions:

Web Accessibility

Alt text enables visually impaired users to understand images via screen reader software. The screen reader program reads out the alt text, describing the image so users can better understand the context.

According to Web Content Accessibility Guidelines (WCAG), alt text falls under the Perceivable principle of making content accessible to users with disabilities. Providing text alternatives for non-text content ensures those with vision impairments can equitably consume content.

SEO

Alt text allows search engines, like Google, to index the content of images. Without alt text, the context of an image would remain a mystery to Google.

Well-written alt text that includes important keywords helps search engines understand the topic of the image. In turn, this can improve rankings in standard web searches and Google Image searches.

User Experience

During slow network connections, images may fail to load on web pages. In these cases, the alt text will appear in place of the image so users still glean value. Alt text provides a smooth user experience when images cannot render properly.

Additionally, alt text gives context for decorative images that don’t add significant meaning. Users can quickly determine an image does not contain vital information.

In summary, alt text powers accessibility for the visually impaired, SEO value for search engines, and better user experience during network disruptions.

Alt Text HTML Syntax

The alt text HTML attribute gets inserted directly into the image (<img>) tag:

<img src="photo.jpg" alt="Description of the image goes here">

The key components:

• <img> – The HTML image tag
• src – Defines the image file location
• alt – The alt text attribute
• Text inside alt quotes – Describes the image, which gets read by screen readers

For example:

<img src="puppy.jpg" alt="Golden retriever puppy wearing a red bandana">

This syntax adds the alt text “Golden retriever puppy wearing a red bandana” to the puppy.jpg image file.

Now when a visually impaired user visits this web page with a screen reader, it will state “Golden retriever puppy wearing a red bandana” when encountering this image.

Alt Text Best Practices

Crafting effective alt text requires some skill. Follow these best practices when adding alt text to images:

Be Accurate & Concise

Strive for accuracy while being concise. Good alt text acts as a precise description of the image.

• Describe the image literally without extra details a visually impaired user wouldn’t need.
• Focus only on the significant elements visible in the image.
• Avoid adding non-essential information or backstory that cannot get conveyed through an image alone.

Keep it Brief

Google recommends alt text stays under 125 characters. Extremely long alt text hampers user experience for those relying on screen readers.

Stick to key descriptive phrases over lengthy sentences or paragraphs. Identify the crucial details that summarize precisely what the image portrays.

Avoid Duplicating Caption Text

Many images include captions, which often repeat the same description as the alt text. Avoid copy-pasting the caption into the alt text field.

Instead, the alt text should provide a concise descriptive summary while the caption offers more details, context, commentary, etc.

Use Natural Language

Write alt text as you would naturally describe the image out loud to another person. Avoid awkward phrasing that goes overboard on keywords. The description should flow naturally.

Single Words Are Okay for Decorative Images

Purely decorative images that just show color, textures, shapes, visual flair, etc. can use single word alt text such as “decorative”, “ornamental” or “artistic”.

This signals to users with screen readers they aren’t missing key information.

Include Images Critical to Understanding

Visually impaired users commonly feel excluded from content-critical images without adequate alt text descriptions. Always prioritize alt text for images containing meaningful information.

Graphs, charts, diagrams, maps and data visualizations require thoughtful alt text so blind users can fully understand key takeaways.

Validate with Screen Readers

The best way to assess your alt text is to validate it with actual screen readers. The most popular screen reader programs include JAWS (Job Access with Speech) and NVDA (NonVisual Desktop Access).

Test that your alt text descriptions make sense and successfully convey what sighted viewers can infer from the image. Refine confusing, inadequate or repetitive alt text.

By mastering these best practices, you can write stellar alt text that boosts accessibility, SEO and user experience.

Detailed Alt Text Examples

Now let’s explore some detailed examples that demonstrate proper alt text formats for different image types.

People Images

When describing photos of people, the alt text should identify them clearly by name and list relevant attributes.

<img src="headshot.jpg" alt="Jane Smith, woman with blonde hair smiling and wearing black glasses outdoors">

For group shots, list the key people pictured from left to right to provide helpful orientation.

<img src="coworkers.jpg" alt="From left, Sara, Diego and Allison, coworkers talking near office windows">

Avoid referring to physical features that don’t relate to conveying meaning, as in race, gender, disability, or other protected attributes. The goal is to succinctly identify people shown without insensitive, irrelevant or offensive descriptions.

Place Images

To describe images displaying locations like cities, landmarks, buildings or property, the alt text should name the exact place.

<img src="golden-gate.jpg" alt="Golden Gate Bridge spanning across blue water with San Francisco cityscape including hills and buildings in background">

If it’s an unknown location or generic stock photo landscape, describe the setting and key elements without speculation about the unconfirmed place.

Product Images

Product images commonly appear on ecommerce sites and visual catalogs. The alt text should include the specific product name, color, key attributes and any people interacting with it.

<img src="water-bottle.jpg" alt="Woman drinking from blue 32 oz plastic leakproof water bottle with straw">

If showcasing a lineup of products, number them from left to right.

Graphs & Charts

Data visualizations require thoughtful alt text so visually impaired users can understand key statistics, relationships and trends.

The description should highlight main takeaways, prominent data points and convey changes over time if applicable. Avoid overwhelming detail.

Bar Graph

<img src="bar-graph.png" alt="Bar graph with website traffic on y-axis ranging from 100,000 to 900,000 and years 2020 through 2023 along x-axis. 2020 starts at 100,000 and goes up to 400,000 for 2023 showing steady growth.">

This summarizes the most pertinent data story. Additional granular stats get ignored for simplicity.

Line Graph

<img src="line-graph.png" alt="Line graph of website sessions for December 2021 ranging from 100,000 to over 250,000 on y-axis. Steady line bottoms out early December around 125,000 then spikes straight up to hit 250,000 during mid-December holiday sale then drops again post-Christmas.">

Again, we spotlight the key trend of rising and falling website traffic during the month-long holiday sale season.

Decorative Images

As mentioned earlier, decorative images just showing colors, patterns, textures and artistic flair should use succinct single word alt text descriptions.

<img src="modern-art.jpg" alt="decorative">

This signals that the image lacks meaningful content.

Infographics

Infographics condense complex information into easily digestible visuals. The alt text should extract key statistics and takeaways.

Describe the layout and structure. Mention any prominent icons that symbolize data such as charts or graphs integrated into the poster-style infographic.

<img src="infographic.png" alt="Infographic displaying internet usage growth comparing 2000 to 2022 in a grid layout with six icons including a rising graph, speedometer, clock, brain, coin stacks, and satellite dish showing that usage is up over 5000% along with other related statistics.">

This overview explains precisely what sighted viewers ascertain at a single glance.

Gifs & Animations

Describe the initial scene first, then what happens when playing. Give readers critical cues about movement, transitions and timing.

For complex gifs, focus solely on the main action vs. attempting to narrate every fine detail.

<img src="car-gif.gif" alt="Man with backpack opens red BMW sports car door, gets into driver seat, places both hands on steering wheel glimpsing right, then smiling drives out of frame. Sequence takes six seconds.">

This play-by-play evaluationPaints the process clearly to non-sighted users.

Groups of Images

When multiple images get presented together in grids, albums or slideshows, provide adequate orientation.

State if it’s a group of related images. Identify where images sit relative to each other using cardinal directions or simple numbering.

<img src="nature-collage.jpg" alt="Collage of five nature scenic photos showing landscape, waterfalls, mountain peaks, forests and sunrises. Images positioned going clockwise starting top left.">

Image Functionality

If clicking an image triggers specific functionality like opening a slideshow, playing a video, or launching a file download, communicate the resulting action in the alt text.

<img src="video-thumbnail.png" alt="Play button icon centered on video still of night sky. Clicking plays 'My Stargazing Timelapse' nature video.">

This helps visually impaired users better interact with the intended clickable UI elements.

By mastering alt text best practices for different image categories, you can greatly improve site accessibility and CX.

Tools for Adding Alt Text

Manually adding well-crafted alt text to images offers the best results. However, leveraging tools can streamline efficiency. Here are the top options:

Web Content Management Systems

Modern web CMS platforms like WordPress, Squarespace Joomla, Drupal and more allow manually entering alt text when uploading images or embedding them into content. Look in the image settings for the designated alt text field.

Microsoft Office

When inserting images into Word, PowerPoint or other Office documents, take advantage of built-in alt text right click menus and options to add descriptions that get exported on web versions.

Web Development Frameworks

JavaScript web dev frameworks like React offer hooks and methods to make adding alt text straightforward. Refer to coding documentation for framework-specific guidance.

Image Annotation Software

Certain niche software options focused specifically on image annotation could prove useful for batch editing or applying AI to auto-generate alt text at scale. However, confirm accuracy.

For bloggers, marketers and online businesses creating their own custom visual content, sticking to manual annotations remains ideal to tailor high quality, tailored descriptions.

Generating Automated Alt Text

Leveraging artificial intelligence to auto-generate alt text seems appealing to accelerate bulk image annotation at scale. However, current technology limitations yield inconsistent, inaccurate results lacking human nuance.

AI Limitations

Here are downsides to relying solely on automated alt text AI rather than manual creation or supplementation:

• Fails to optimally identify people/objects in abstract representations with insufficient context
• May include repetitive, obvious or poorly phrased language
• Blindly copies embedded metadata that fits image dimensions without analyzing actual content
• Does not account for decorative vs. informative image differentiations
• Unable to convey emotion and deeper meaning like sarcasm
• Limited diversity & inclusion across skin tones, cultures, disabilities and accessibility needs

Despite rapid innovations, even the most advanced computer vision algorithms cannot fully replace human visual and creative reasoning. The mislabeled facial recognition example demonstrates why AI still requires ample oversight.

Use AI To Assist (Not Replace) Humans

The most balanced approach combines leveraging AI capabilities to accelerate the pace of quality alt text generation while providing ample training, reviews and manual overrides of automated suggestions on an ongoing basis.

Think of AI as an intelligent assistant rather than as a complete replacement to human effort and input.

When used appropriately in balance, AI empowered alt text generation tools show immense promise in helping content teams scale descriptions across massive visual content libraries.

Conclusion & Key Takeaways

That concludes our comprehensive guide to alt text, including what it is, why it matters, key examples, best practices and generation tools.

Here are the key takeaways:

• Alt text enables accessibility for blind users, improves SEO and enhances user experience.
• Well-written alt text acts as a concise, accurate textual description of an image’s contents.
• Keep alt text under 125 characters without extraneous details.
• Single simple terms work for decorative images lacking meaningful content.
• Use natural language and orient descriptions from left to right.
• Prioritize alt text for content-critical images like graphs and maps.
• Validate screen reader pronunciation to guarantee quality.
• Manual creation yields the best results, but AI and automation can assist.

By mastering proper alt text best practices, both technical and non-technical teams can better meet accessibility guidelines while boosting organic visibility. Feel free to refer back to this guide anytime you need to polish image annotations.