#25 What Good Is a Crystal Ball If No One Can Read It? Let’s Talk Alt Text
Mini-Series: Building an Accessible Website (Even If Tech Isn’t Your Thing)
Let’s talk about something that sounds technical but is actually super simple and important: alt text.
Alt text (short for “alternative text”) is a description you add to images on your website so that people using screen readers can still understand what’s there.
What Is Alt Text?
Alt text is a short sentence or phrase you attach to an image to describe what it shows. It’s not something most visitors will see, but screen readers will read it aloud to someone navigating your site by sound instead of sight.
Similar to subtitles, it ensures that everyone who visits your site can understand your content and benefit from it—whether they can see the actual content or not.
Accessibility Rule: Every image on your site needs an alt attribute—even if it’s just left empty for decorative ones.
Two Types of Alt Text (and When to Use Them)
1. Descriptive Alt Text
Use this when your image conveys information that you want your website visitors to understand or benefit from.
Example:
Maybe you have a blog post on Snow White and provide this image while discussing the poison apple.
Alt text: alt="A hand with painted red nails passing a bright red apple to someone else’s hand"
2. Empty Alt Text
Use this when your image is purely decorative (think: a sparkly divider, background flourishes, or a leafy border).
Example:
Maybe you use a flourish like this on your About page. It doesn’t convey any information to readers. It’s just pretty/decorative.
Alt text: alt=""
See how there aren’t any words between the double quotes? Screen readers understand that this means the image is decorative and will either announce this aloud or ignore the image entirely.
(How you set an empty alt text tag on an image will depend on what website software you are using. Usually, you can leave the alt text box associated with the image blank or check the “decorative image” box in your website builder for the image.)
What Makes Alt Text Good?
Be descriptive but brief. Think one sentence max.
Include any visible words in the image exactly as they appear.
Don’t use quotes inside your alt text: Since the alt text is included in double quotes in the website’s code, adding quotes inside the text can confuse screen readers and might make them stop reading the description before they actually get to the end.
For logos: Write the business name and a short descriptor.
Example:
alt="Maisie M. Meyers Fantasy Author logo with purple moon and stars"
Where to Add Alt Text
If you’re using Canva, Squarespace, WordPress, or Wix—there’s usually a spot labeled “Alt text” when you upload an image. Add your description right there. Easy!
Need to Do Next:
Go through your website’s images
Ask: Is this decorative or informative?
Add descriptive alt text OR mark it as decorative
Test with a screen reader if possible
Windows has a built in screen reader called Narrator. Or, you can download a free screen reader online like this NVDA one. (I’ll do a blog post later on using these to test your final website, but feel free to jump ahead and try for yourself!)
💬 Let’s Talk!
Have you ever tried to navigate a website using a screen reader? Did all of the images have clear and descriptive alt text? If not, how do you think that experience feels for readers who are using a screen reader? Fine? Frustrating? Drop a comment and share!
And if you’d like more warm, approachable help on building an author website that actually works for all readers, subscribe to my newsletter.