How to Write Alt Text for Accessibility and SEO – Without Breaking your Brain, or Your Website Code!

Ever uploaded an image to your website or social media, saw the little box labeled “alt text,” and thought… what even goes here?

Alt text (short for “alternative text”) might seem like a small detail, but it plays a huge role in making your content more inclusive, ethical, and discoverable. Whether you're a mission-driven entrepreneur, a creative visionary with a million ideas, or a chronically overwhelmed business owner juggling all the things  –  you deserve a simple, stress-free way to get this right.

And no, you don’t need to become a tech wizard or learn code to do it.

In this guide, we’re breaking down:

• What alt text is (and what it isn’t),
  
• Why it matters for both accessibility and SEO,
  
• How to write it in a way that aligns with your values and protects your website from code-breaking chaos,
  
• Plus easy templates for different image types  –  from infographics to carousels to quote graphics.
  

Because your visuals should tell a story everyone can access  –  without breaking your brain (or your site).

What Is Alt Text, Really?

Alt text is a brief written description of an image that gets added behind the scenes in your website or social post. It’s not always visible to everyone, but it plays a big role in two very important areas: accessibility and SEO.

Alt Text For Accessibility:

Alt text is read aloud by screen readers, allowing blind and low vision users to understand the content and context of your images. Without it, a user might just hear “image” and nothing more  –  leaving them out of the conversation entirely.

Alt text also loads in place of an image if it fails to load properly. So, it also helps users understand the images if their internet is spotty.

Writing thoughtful alt text is one small but powerful way to practice inclusive marketing and make sure everyone can engage with your content.

Alt Text For SEO:

Search engines can’t “see” your images, but they can read your alt text. That means writing relevant image descriptions helps Google (and other platforms) understand your content better  –  which can boost your visibility in search results and even get your images indexed.

Alt text helps people access your content and helps platforms understand it. It’s a behind-the-scenes detail with front-and-center impact  –  and it’s one of the easiest ways to market with more kindness, clarity, and intention.

Why Alt Text Matters in Ethical Marketing

Writing alt text isn’t just a “nice-to-have” or something you do for compliance. It’s a reflection of your values.

If your brand is rooted in justice, equity, diversity, and inclusion  –  alt text is a practical, everyday way to walk that talk.

Accessibility is ethical marketing.

When we talk about ethical marketing, we’re talking about creating content that respects people’s identities, abilities, and lived experiences. That includes making sure that people who use screen readers or have low vision can still fully engage with your content  –  whether it’s a carousel, a quote graphic, or an infographic explaining your services.

Exclusion isn't always intentional, but that’s exactly why inclusive defaults (like writing alt text) matter.

It’s small but mighty.

You don’t need a massive accessibility overhaul to start making a difference. Alt text is a bite-sized, sustainable habit that:

• Increases access
  
• Reflects your brand values
  
• Builds trust with your audience
  

And if you’re neurodivergent or chronically overwhelmed, good news  –  alt text is one of the simplest ethical marketing tools you can build into your workflow.

Just Marketing® in action

Alt text supports the core principles of Just Marketing® by:

• Prioritizing people over platforms
  
• Creating inclusive defaults
  
• Centering accessibility as a non-negotiable part of your strategy  –  not an afterthought
  

Whether you're writing social captions, designing a launch page, or posting a behind-the-scenes meme, alt text ensures that your visual content speaks to everyone  –  not just the people who can see it.

How to Write Alt Text Without Breaking Your Brain

Writing good alt text isn’t about being poetic or perfect. It’s about being clear, kind, and conscious of what the image communicates.

Let’s break it down into neurodivergent-friendly, non-overwhelming steps:

Step 1: Ask yourself  –  What’s the point of this image?

Start by identifying what function the image serves in your content. Is it:

• Sharing information (like a chart or infographic)?
  
• Supporting a message (like a quote or carousel)?
  
• Purely decorative?
  

Your alt text should reflect the purpose of the image, not just what’s visually there.

Step 2: Describe what’s essential  –  no more, no less.

Your goal isn’t to describe every single color and font. It’s to give someone who can’t see the image the same understanding and experience as someone who can.

Think: “If I were describing this to a friend over the phone, what would I say?”

Step 3: Keep it short and human.

• Aim for 1–2 sentences (around 125 characters is a good guide).
  
• Write in plain, conversational language.
  
• Avoid phrases like “image of” or “picture of”  –  screen readers already cover that.
  

Step 4: Add context when needed

Sometimes, the image isn’t just visual  –  it contributes meaning. So don’t be afraid to add that layer of interpretation.

For example:

• Instead of: “A photo of a protest sign.”
  
• Try: “A protest sign that reads ‘Protect Trans Youth' held high in a crowded rally.”
  

It gives context that adds value without overcomplicating things.

How to Write Alt Text Without Breaking Your Website Code

Writing alt text is one thing  –  but writing it in a way that actually saves correctly? That’s where things can quietly go sideways.

You won’t crash your site or throw your whole page into chaos  –  but if you use the wrong characters, your alt text might just disappear into the void and never get saved at all.

So, you could write the most perfect justice-aligned image description… and then accidentally lose it because of a rogue quotation mark.

Let’s save you from that heartbreak.

Avoid These Alt Text Code-Breaking Characters

Most websites, social media platforms, email providers (etc.) have convenient and easy-to-use form fields to enter your alt text, and then those form fields insert what you input into the site’s code, like this:

 <img src=”image.jpg” alt=”Your alt text here”>

So anything that confuses that structure can stop your alt text from saving correctly  –  especially if you’re using a website builder or email platform that auto-converts your content into HTML behind the scenes.

Here’s what to watch out for…

Double quotation marks (“) 

Alt text lives inside quotation marks in your HTML  –  it is usually written like this in code:

 <img src=”image.jpg” alt=”Your alt text here”>

So if you add more double quotes inside that sentence, it can break the structure by closing the attribute early, and anything after them won’t save.

Instead, use single quotes (‘) to keep things readable and safe.

The Best Way	The Broken Way
A protest sign that reads ‘Access is love’	A protest sign that reads “Access is love”
<img src=”image.jpg” alt=”A protest sign that reads ‘Access is love’”>	<img src=”image.jpg” alt=”A protest sign that reads“> Access is love””>

Special characters like <, >, and &

Special characters like <, >, and & have special meanings in HTML:

• < and > can be interpreted as HTML tags.
  
• & can start an HTML entity (like  ).

If you must use them, replace them with:

• < for <
  
• > for >
  
• & for &

But, for simplicity's sake, I’d just avoid them all together. Skip the < and >, and spell out “and” instead of using the & symbol.

Use Plain Text in Your Alt Text Field

Most website builders (WordPress, Squarespace, Wix, Showit, etc.) and platforms (LinkedIn, Instagram, Canva) give you an alt text field  –  just type plain text, no formatting, no emojis, no code, and none of those code-breaking-characters above.

If you do it right:

• The text saves
  
• Screen readers read it
  
• Search engines index it
  
• Everyone wins

What to Do With Decorative Images

Some images aren’t meant to communicate information  –  they’re just there to look cute or break up text. In those cases, you should add a single space into the alt text field – this tells technology that you didn’t forget it (if it’s empty) but that it’s decorative (because there is only one space).

Use a space for alt text:

alt=” “

This tells screen readers: “No need to stop here.”
It’s actually more inclusive than forcing a meaningless description on someone.

How to Check If Your Alt Text Actually Saved

So you've written your alt text (go you!)… but how can you be sure it actually saved correctly?

Here are two easy ways to check  –  no coding background required:

Option 1: Use “Inspect” in Your Browser

If you're working on your own website and want to see exactly what's happening under the hood, try this:

1. Right-click on the image you want to check for alt-text.
   
2. Click “Inspect” (in Chrome or most modern browsers).
   
3. In the code that appears, look for something like:
   
   <img src=”…” alt=”Your alt text here”>
   
4. Check that your alt text appears inside the alt=”” attribute  –  and that it’s showing up exactly as you wrote it (with no missing words or weird quote issues).
   

If it’s there, it’s working.

But, if the alt attribute is missing or empty, something went wrong  –  go back and double-check for quotation marks or unsupported characters.

Option 2: Use an Alt Text Accessibility Checker

You don’t need to read code at all (although, it’s really quick and easy once you get the hang of it)  –  accessibility tools will tell you if alt text is missing, broken, or confusing.

Try one of these:

• WAVE Accessibility Tool: Just enter your URL, and it’ll highlight images missing alt text or ones that might need improvement.
  
• WebAIM's Alt Decision Tree: Not a testing tool, but great for helping you decide what kind of alt text (if any) is needed.
  
• Chrome Extensions like:
  
  • axe DevTools or
    
  • Accessibility Insights for Web
    

You can also tab through your site using a keyboard and listen with a screen reader (like Apple VoiceOver or NVDA) to experience your content the way assistive tech users might. It’s eye-opening and empowering.

TL;DR: How to Make Sure Your Alt Text Sticks

• Use single quotes (‘) if you need quotes in your description
  
• Avoid special characters that confuse HTML, like <, >, and &
  
• Stick to plain text
  
• Use a single space (alt=” “) for decorative visuals
  
• Test when possible  –  especially if you’re using custom code or email platforms
  

Ready for those copy-paste templates so you don’t have to reinvent the wheel every time? 

Alt Text Templates for Different Image Types

Save-worthy. Swipe-friendly. Overwhelm-reducing.

Now that you know what to do and what to avoid, here’s your plug-and-play toolkit for writing clear, inclusive, and functional alt text  –  even when your brain is juggling a million other things.

Each one includes:

• Goal/What matters most
• A simple structure to follow
• A ready-to-use customizable template
• An example

Infographics

Focus on the main point or takeaway  –  not every detail.

• Focus on the headline, main takeaway, and any calls to action.
• If the text is long, include it in the caption or link to a full transcript.
• Skip excessive text repetition – link to full text in the caption or body for accessibility.

Structure:

• Brief description of the image type: Say it’s an infographic
  
• Share the topic or key message
  
• Mention where to find full text (if applicable)
  

Template:

Infographic titled ‘[Title]'. It highlights [main idea]. Full text is in the post.

Example:

Infographic titled ‘Ethical Email Marketing in 3 Steps'. It highlights consent, clarity, and easy opt-outs. Full text in caption.

Carousels (Multi-Slide Graphics)

Summarize the series as a whole.

• Include content in captions or body copy for full accessibility.
• Use the first image to describe the whole set
• If the text from each slide is repeated in the caption, you don’t need detailed alt text for every slide.

Structure:

• Mention it's a carousel
  
• Share the overall theme/topic/purpose
  
• Say where full content lives (in the caption/post)

Template:

Carousel graphic: ‘[Main topic]'. This series shares [brief overview]. Full text is in the post.

Example:

Carousel graphic: ‘How to Market with ADHD'. This series offers 5 tips for building consistency with less burnout. Text is in the caption.

Screenshots

Describe what’s being shown and why it matters.

• Especially important if it's showing a tool, testimonial, or social proof.

Structure:

• Mention it’s a screenshot
  
• Describe what’s on screen
  
• Explain the relevance
  

Template:

Screenshot of [tool or platform] showing [what’s visible]. Used to illustrate [why it matters].

Example:

Screenshot of a Trello board showing three lists: Ideas, In Progress, and Posted. Used to illustrate a simple content workflow.

Quote Graphics

Include the quote text and who said it

• Make sure screen reader users get the same inspiration or message!

Structure:

• Say it’s a quote graphic
  
• Include the full quote
  
• Attribute the speaker
  

Template:

Quote graphic. Text reads: ‘[quote]' – [name].

Example:

Quote graphic. Text reads: ‘Marketing should be inclusive by default.' – Meg Brunson

Charts & Graphs

Highlight the trend or insight  –  not every data point

• Link or reference where detailed data can be found if needed.
  

Structure:

• Identify the type of chart
  
• Describe the topic
  
• State the key takeaway
  

Template:

[Type] chart showing [topic]. It illustrates that [main takeaway].

Example:

Bar chart showing engagement by platform. It illustrates that LinkedIn had the highest engagement last quarter.

Decorative Images

If it adds no meaningful content, No alt text is needed  – don’t distract screen reader users with unnecessary fluff.

What to do:

• Use alt=” “ (alt attribute with a single space)
  
• This tells assistive tech to skip the image
  

Example:

A pastel gradient background used behind text gets alt=” “  –  because the image doesn’t add meaning.

Bonus Tip: Keep a Swipe File

Save your favorite alt text examples (or use a Google Doc or Notion page) to reuse and adapt. Think of it as your “brain backup” for future content. Or, bookmark this page!

Common Alt Text Mistakes to Avoid

You’re already doing better than most by caring  –  let’s fine-tune it.

Alt text isn’t about perfection. It’s about intention and inclusion. That said, there are a few common missteps that can reduce the effectiveness of your alt text  –  or undo your hard work completely.

Let’s clear them up, no guilt trips included:

1. Writing “Image of…” or “Picture of…”

Why it’s a problem:  Screen readers already tell the user it’s an image. You don’t need to repeat that info.

Instead: Jump straight into what matters.

• Avoid: “Image of a woman speaking on stage.”
  
• Better: “A woman standing on stage giving a keynote about inclusive marketing.”
  

2. Keyword stuffing for SEO

Why it’s a problem: Yes, alt text helps with SEO  –  but it’s not a place to cram in keywords unnaturally. Google and screen readers can tell when you're writing for algorithms instead of humans.

Instead: Write for clarity first. Use relevant keywords only if they naturally fit.

• Avoid: “Marketing, ethical marketing, ethical small business marketing.”
  
• Better: “Graphic showing 3 ethical marketing tips for small business owners.”
  

3. Over-describing visual details

Why it’s a problem: If it’s not relevant to the meaning, it can distract or overwhelm the user. Alt text isn’t the place for a full art critique.

Instead: Focus on what the image contributes to the content.

• Avoid: “A watercolor-style graphic with teal, coral, and mustard tones, featuring delicate brush strokes.”
  
• Better: “A colorful graphic that says ‘Done is better than perfect.'”
  

4. Repeating text that’s already written elsewhere

Why it’s a problem: Screen readers already read the surrounding text and captions. Repeating it in the alt text can be redundant or even confusing.

Instead: Use alt text to complement nearby text, or leave it empty (alt=””) if the info is already fully conveyed elsewhere.

5. Forgetting context and purpose

Why it’s a problem: Alt text isn’t just about what’s in the image  –  it’s about why it’s there. Leaving out the “why” can flatten the meaning.

Instead: Include the emotional or informational context when it matters.

• Avoid: “A person holding a sign.”
  
• Better: “A protester holding a sign that reads ‘Books Not Bans' at a rally for inclusive education.”
  

6. Letting your platform auto-generate it

Why it’s a problem: Instagram, Facebook, and some CMS platforms will create automatic alt text based on AI… and it’s often wildly inaccurate or vague.

Instead: Write your own. It’s faster than you think, and way more accurate  –  especially when you're communicating values, nuance, or context. Plus, the more you do it, the quicker it’ll become a normal part of your routine.

Reminder: You don’t need to get it perfect  –  you just need to show up with care. Alt text isn’t a checkbox; it’s a kindness.

Real-Life Alt Text Examples

From “meh” to meaningful  –  because it’s easier to write it when you see it done well.

Sometimes, the best way to learn is to see the difference. Below are a few side-by-side examples to help you understand what works, what doesn’t, and why it matters.

---

Social Media Graphic with a Quote

• Not-so-great alt text:
  “Image with a quote”
  → Too vague. No actual quote included.
  
• Better alt text:
  “Quote graphic. Text reads: ‘Your message deserves to be heard  –  by everyone.'”
  → Simple, clear, and shares the quote.
  

---

Infographic About Just Marketing

• Not-so-great alt text:
  “Infographic about marketing.”
  → Too generic. Doesn’t add any value.
  
• Better alt text:
  “Infographic titled ‘3 Pillars of Just Marketing'. It highlights ethical, inclusive, and accessible. Full text is in the post.”
  → Tells the user what to expect and where to find more.
  

---

Screenshot of a Workflow Tool

• Not-so-great alt text:
  “Trello board”
  → Missing context. What’s the point of showing this?
  
• Better alt text:
  “Screenshot of a Trello board showing columns for Ideas, In Progress, and Posted. Used to demonstrate a simple content creation workflow.”
  → Provides both visual info and the reason it’s included.
  

---

Decorative Background Image

• Not-so-great alt text:
  “Watercolor background with pastel tones.”
  → Not useful to screen reader users; just adds noise.
  
• Better approach:
  alt=” “
  → Tells assistive tech to skip it entirely, which is more accessible.

---

Graph Showing Engagement Trends

• Not-so-great alt text:
  “Bar chart with social media platforms.”
  → Doesn’t say what the chart shows.
  
• Better alt text:
  “Bar chart showing engagement by platform. It shows LinkedIn has the highest engagement among ethical entrepreneurs.”
  → Summarizes the key takeaway.
  

See the pattern? Great alt text is clear, relevant, and value-driven. It doesn’t need to be fancy  –  just intentional.

Alt Text = Small Habit, Big Impact

Alt text might seem like a small detail in the content creation process  –  but it’s one of those tiny, powerful practices that ripple out in all the right ways.

By taking the time to write intentional image descriptions, you’re not just improving your SEO or checking an accessibility box. You’re actively:

• Making your content more inclusive
  
• Respecting the diverse needs of your audience
  
• Walking your talk as an ethical entrepreneur
  
• Showing that your message is meant to be heard  –  and seen  –  by everyone
  

And the best part? You don’t have to do it perfectly. You just have to do it with care.

Quick Recap: How to Write Alt Text Without Breaking Your Brain (or Your Code)

• Write concise, meaningful descriptions of what the image shows and why it matters
  
• Use single quotes to avoid formatting issues
  
• Avoid special characters like <, >, or & unless you escape them properly
  
• Check your work using the inspect tool or an accessibility checker like WAVE
  
• Use our image-type templates to make it easy every time
  

What to Do Next:

• Bookmark this post so you can refer back to the templates anytime
  
• Start small: Add alt text to your next blog post, carousel, or newsletter image
  
• Need help building accessible content systems? Let’s connect. You don’t have to figure it all out alone. Connect with me on LinkedIn, or Instagram. 

Because ethical marketing isn’t just a strategy  –  it’s a practice. And every time you choose accessibility, you’re building a business that’s rooted in care, not clicks.