Image Alternative Text - Directive Consulting

Skip to content

• Methodology
• About
  • About Us
  • Careers
  • Become a Partner
• Services
  • Customer Generation See how it works Startups Package Customer Generation for startups Content & SEO Achieve long-term growth in organic traffic, qualified leads, and pipeline with performance content and SEO. CRO & Performance Design Build designs that create lifelong fans of your brand through impactful design strategy and execution. Paid Media Launch strategic PPC ads that capture high-intent buyers and power continual growth. Video Short-form videos are an engaging and strategic way to communicate value faster across all platforms. Marketing Ops Take command of your marketing data, tech stack and processes to achieve sustained, efficient growth. Go-to-Market Strategy Attract, convert, and retain your customer base with our Customer Generation strategies. Customer Generation Startups Package Content & SEO Paid Media CRO & Performance Design Marketing Ops Video Go-to-Market Strategy
• Outcomes
  • Customer Generation See how it works Startups Package Customer Generation for startups Improve brand discoverability Bridge the gap between your product and the problem you solve to get long-lasting, compounding increases in traffic, customers, and ROI. Focus on your customer Optimize your landing pages and ad sets for relevance, engagement, and conversions for more qualified pipeline and ROI from your campaigns. Drive activation not just acquisition Turn your paid media campaigns into direct drivers of revenue and see more ROI in auction-based advertising environments – without sweating over CPL. Become unforgettable Craft visually compelling narratives that resonate with your audience, enhance brand perception, and build credibility. Make better decisions Build the key processes, automations, and programs you need to get the most visibility and value out of your tech stack – and your marketing. Customer Generation Startups Package Improve brand discoverability Drive activation not just acquisition Focus on your customer Make better decisions

    Become unforgettable

• Success Stories
• Resources
  • Get The Verdict Report Get SaaS insights and benchmarks backed by $55M in ad spend. Download the Verdict WE CAN HELP YOU Resources Library Resources to take your Customer Generation to the next level. Our Marketing Blog For curious lifelong learners in the tech and SaaS space. Join Society Get the tech marketing expertise you need when you need it. Pulse: SaaS Marketing Data Gain a competitive edge with our powerful marketing data analysis tool. MORE RESOURCES Original Marketing Podcast Marketing Glossary Directive Digest Newsletter The Verdict SaaS Marketer’s Toolkit Get The Verdict Report WE CAN HELP YOU Resource Library Our Marketing Blog Join Society Pulse: Marketing Data MORE RESOURCES Original Marketing Podcast Marketing Glossary Directive Digest Newsletter The Verdict SaaS Marketer’s Toolkit
• Book Intro Call

Book Intro Call

• A
• B
• C
• D
• E
• F
• G
• H
• I
• J
• K
• L
• M
• N
• O
• P
• Q
• R
• S
• T
• U
• V
• W
• X
• Y
• Z

GLOSSARY Image Alternative Text Image Alternative Text Meet your Customer Generation agency, pioneering impactful B2B SaaS marketing with tangible results. Book Intro Call Sections

• What is Image Alternative Text?
• Adding Alt Text to Images on Your Website
• Why is Image Alternative Text Important?
• 4 Simple Rules for Adding Alt Text to Your Images
• 5 Alt Text Examples from Worst to Best

What is Image Alternative Text?

Image Alternative Text, or “Alt Text” provides a textual alternative to an image on your web page in cases where the user cannot view the image. 

As a textual alternative to an image, the role of Alt Text is to clearly and concisely describe the purpose of the image on the page. This may include both its contents (What does the image show?) and its functionality (What happens if the user clicks on the image?)

Alt Text is often presented and utilized in cases where the user is:

1. Browsing the web with images disabled, or
2. Visually impaired, or
3. A robot.

Unlike headlines and body copy, Alt Text is not normally visible on web pages for most users. Instead, each image has its own Alt Text which exists as a hidden HTML attribute.

Screen reader programs and search engine web crawlers that don’t have the ability to parse the meaning of an image will instead access its Alt Text and either read it to the user or process it to better understand its contents and purpose on the page.

Adding Alt Text to Images on Your Website

In HTML5, all image elements on the page are required to have an alt attribute where the publisher can include alternative text. Alt attributes can be (and sometimes should be) left empty, but they should never be entirely absent from an image.

If you’re coding directly in HTML, you will need to include an alt attribute when adding an image element to the page. Your code might look something like this:

<img src=”mydog.jpg” alt=”My Dog” width=”1240” height=”960”>

If you’re using a content management system (CMS) like WordPress, Wix, or similar, you should have a user interface option to input Alt Text, either when you upload an image to the CMS, or when it gets added to a page.

Why is Image Alternative Text Important?

Accessibility

Alt Text is a crucial component of web accessibility. 

Users with visual or cognitive impairments may browse the web with the help of a screen reader that converts text on the page into an audio output. Screen readers can’t do this with images, so instead, they read the image Alt Text to the user. This allows the user to discover the contents and purpose of an image, even if they can’t see it directly.

If the image alt text is missing, empty, or poorly written, the user misses out on any content or functionality the image provided. 

In some cases, improper Alt text can have a significant negative impact on user experience for visually or cognitively impaired users. For example, stuffing the Alt text with keywords means that a screen reader will take longer to read it, preventing the user from discovering the actual relevant content on the page.

Search Engine Optimization

Image alt text also plays a role when optimizing your web pages for Google Search.

Search engines use web robots called crawlers to scan the contents and structure of your website for indexing and ranking purposes. 

And just like screen reading software, crawlers can’t directly parse what an image means or how it relates contextually to the content on your site. Instead, crawlers use other information like image titles, file names, and image alt text as clues about the contents of an image. 

With that in mind, including target keywords in your image alt text can provide Google with a stronger signal about the contents of your page and may help with your rankings in Google Image Search.

Google is also getting more focused on UX when it comes to ranking pages in the SERPs. Deploying high-quality image alt text across your website creates a better experience for users, impacting downstream metrics like bounce rate and time-on-page that figure into Google’s SERP ranking algorithm.

4 Simple Rules for Adding Alt Text to Your Images

All Images Get an Alt Attribute

Every image on your website should have an Alt attribute. While it’s usually best to include some image alt text, alt attributes can sometimes be left empty (more on that shortly) – but should never be entirely absent.

Text Should Present Content and Function of Images

As a general rule for ensuring accessibility, the text on your web page should present the entire content and function of all images on the page. 

This means that the alt text, together with the image title, caption, and body copy, should capture the entire contents and functionality on the page. This practice ensures that no content or function will be lost if the image cannot be displayed.

Alt Text Should Be Descriptive, But Not Redundant

Alt Text should describe the contents/function of the image on the page, but there’s no need to repeat information that appears elsewhere on the page. There’s also no need to include the phrase “image of…” or “picture of…” in the image alt text. 

Publishers should be as concise as possible when adding image alt text. A few words, or in rare cases, a sentence or two, should be enough to convey the meaning of an image in simple terms.

Empty Alt Attributes are Sometimes Okay

If the contents and purpose of an image are adequately described by its caption or the body copy, it might be acceptable to leave the image alt text attribute empty. 

When an image is included on a page for decorative purposes only, the image alt attribute can be left empty as the contents of the image have no relationship to the contents of the page.

For even more detailed guidelines on writing Image Alt Text, visit WebAIM.

5 Alt Text Examples from Worst to Best

Check out these five examples of Alt Text for the image below, arranged from “worst” to “best”. For each example, we’ll explain why the image alt text is good or bad and the overall impact on user experience.

Worst: (alt=”picture of a tiger, lion, cheetah, orange, black, white, paws, tail, stripes, snow, grass, woods, running, leaping, bounding, tiger lily, tiger moth, tiger habitat”)

This is an example of keyword-stuffing the alt tag. A screen reader would read the entire contents of this tag before getting to the rest of the page, forcing the reader to wait to discover any useful content. This image alt text does not accurately convey the contents/purpose of the image.

Bad: no alt attribute

Just marginally better than our worst example, having no Alt attribute is also pretty bad. It means that both visually/cognitively impaired users and web crawlers will end up clueless about the contents and purpose of this image.

Neutral: (alt=””)

If this image were purely decorative, or if its contents were already described on the page, it would be fine to leave the image alt attribute empty. Otherwise, images with relevant content or a purpose should always have alt text added. If we imagine this image on an Encyclopedia page 

Good: (alt=”Tiger”)

Alt text should typically be a few words or a short sentence, so just adding the word “Tiger” is a great start. However, depending on the contents and purpose of the page, it might be appropriate to include more details in the Alt Text.

Best: (alt=”Siberian Tiger Hunting in Snow”)

This alt text example is short and concise while being highly descriptive of the associated image. As long as the information provided here is not redundant with the body copy on the page, this alt text should work well for both human users with screen readers and for search engine crawlers.

Let’s get better at performance marketing, together. Join Society, our exclusive Slack community dedicated to marketers in the tech space. Join the free Slack community

Learn More

• B2B, Content Marketing, Demand Generation

How to Get Your B2B SaaS Brand Discovered in Today’s Overflowing Sea of Sameness

Introduction At this point, new data breaches and cyber threats occur almost...

• B2B, Demand Generation, Social Media

Maximizing SaaS Growth with LinkedIn Ads: A Strategic Guide for B2B Marketers

Leveraging the promotional power of LinkedIn can seriously accelerate the growth of...

• B2B, Demand Generation, Inbound Marketing

The Lowdown: The $55M value of LinkedIn and Google advertising for B2B SaaS brands

To understand the true value of LinkedIn and Google advertising for B2B...

Whether you need done-for-you marketing or expert DIY guidance, Directive has you covered.

Book Intro Call Navigation

• About
• Careers
• Case Studies
• Book Intro Call
• Methodology
• Directive Digest Newsletter

Services

• Paid Media
• SEO
• Design
• Marketing Operations
• Video
• Marketing Strategy

Contact Us

• [email protected]
• (949) 214-4024

Want to join the team?

• [email protected]

RFP Submissions

• [email protected]

Locations

Orange County

Austin

New York City

Toronto

London

MexicoCity

© 2024 Directive. All Rights Reserved.

• Privacy Policy
• Cookies Settings