Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Camera focuses on nature scene shown in round lens held between finger and thumb.

Image alt text best practices for content creators

Ben Long

January 15th, 2020

Written by

Ben Long
Ben Long

Category

Tips & How-Tos

Image alt text might be invisible to most of us (except screen readers and search engines), but that doesn’t mean it’s not important.

In fact, it can have a big impact on some of your website users and play a role in helping Google understand your site (and help it rank for the right search terms).

Despite that, so many websites don’t get alt text right, with:

  • Badly written image descriptions
  • Descriptions for the sake of SEO alone (ahhh keyword stuffing!)
  • No alt text at all (which is sometimes fine, but we’ll talk more about that in a bit)

The thing is, very few content creators are familiar with alt text best practices - both for accessibility and SEO purposes. And it can get a bit confusing, with different rules for different types of images and scenarios.

So, let’s go through some definitions and examples so you can write your next image description with confidence and make your content both more accessible and search engine friendly.

What is image alt text?

Screenshot showing example HTML with image and alt text.

Alt text is an image attribute in HTML that allows you to provide “alternative text” for web images that will display if the image doesn’t load. Or (most importantly) it will get read out by screen readers so vision impaired users can experience the image, website, and context without needing to see it.

In HTML, alt text is coded like this:

<img src="person.jpg" alt="Person looking at the camera and waving." />;

How do you add alt text?

The exact steps and process to add alt text will depend on what editor and CMS you’re using. But to give you an idea, here’s a step-by-step tutorial for adding image alt text using a WYSIWYG editor like TinyMCE:

Demo showing how to edit image alt text using the TinyMCE editor.

  • Step 1: Add your image (if you’re editing an existing image, you can skip to step 2).
  • Step 2: Click on your image.
  • Step 3: Edit the image settings. In your editor, you may need to click an icon that looks like a pencil to open these options.  
  • Step 4: Add your “alt text” or “alternative text” into the field provided. Note that this is different from the “caption”, which is displayed on the page for all users to see, and also different from the “title” attribute, which displays text on hover.
  • Step 5: When you’ve finished, save your changes to the image. If you are making changes to content that is already published, remember to publish the updates.

Tip: Prefer to look at code? You can also update your alt text by switching over to HTML view, finding the <img> tags, and adding alt=”image description goes here” as shown in the examples above.

Why does image alt text matter for accessibility?

Ron Burgundy from the movie

It’s important. Even more important than Ron Burgundy on Anchorman (which is saying a lot 😝).

The original and main reason for the existence of alt text was accessibility. Alt text helps more of your users achieve their goals. It’s designed to describe informative images for users who can’t see them - usually those who are vision impaired, but other users may also find descriptions useful to help process and understand the image.

Depending on the purpose of the content, alt text may also help a visually impaired user experience your article, app, or website the same way as everyone else. For example, if you’re a travel blogger, you might decide to implement detailed descriptions of your photographs to help your users imagine the scenery. Or, if you’re a comedian, you might put some extra effort into describing your images with a funny tone of voice to create a fun, laugh-inducing experience.

Another accessibility issue is technology-related. Some browsers or extensions may block images (to speed up information loading over a slow connection or conserve limited data) and will instead display the alt text. But this is becoming less common as more areas get access to faster internet and increased data.

What about alt text and SEO?

Alt text is one of many ranking factors that Google uses. It’s not as weighty as, say, a header or a title tag, but it does matter. After all, it’s another opportunity to include relevant keywords on your site.

Google says: 

  • “By adding more context around images, results can become much more useful, which can lead to higher quality traffic to your site.”
  • “Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image.”

But don’t forget about accessibility while optimizing your images for SEO. Describing the image with accessibility in mind should be your #1 focus - if you can incorporate relevant keywords, do it. And never, ever keyword stuff your alt text. (Google will eventually find out and they don’t tend to like keyword stuffing.)

Should every image have alt text?

No. The general rule is that if your image is purely decorative (like a divider, spacer, border, or just for eye candy purposes) and doesn’t add meaning or context to the page or content, it doesn’t need alt text.

In that case, leave the alt attribute blank. That way, users with screen readers don’t get hit with a bunch of “border, border, border” announcements before they can get back to the real content. 

The same rule goes for images that have adjacent text that describes them. If adding alt text would force screen readers to repeat themselves, it doesn’t make for a good user experience. In that case, leave the alt text attribute blank.

By the way, if you like rules, you’ll like this handy alt decision tree to help you decide whether your image should have alt text or not (and if it should, what to put there).

How do you actually write alt text?

First, understand the type of image, the context, and confirm that alt text is required. If so, next consider what details your user might need to understand the image (or use your site) if they couldn’t see it.

Write short phrases or complete sentences. Keep it conversational - remember, a screen reader will need to read it out aloud. And use capitalization and punctuation, just as you would write a normal sentence, to help it flow smoothly.

You don’t have to say “picture of” or “image of” as this is already obvious and many screen readers automatically announce “image” or “graphic” so if you write it in the alt text, it could say “image image” which is just plain awkward.

Context is key. The same image would require different alt texts depending on how it’s being used, so if in doubt, think about what information your users need from the image and make sure you write that in your alt text.

How detailed should I go?

This depends on how important the detail in the image is for understanding the content as a whole. 

If there’s already written content around the image that provides some context, you may only need a short alt text description. Like “pink flower”.

But for in-depth, detailed images (like infographics, flow charts, organizational charts, maps, and illustrations), it’s usually best practice to also use an in-depth, detailed description of several sentences or more. This is especially true if substantial parts of the image need to be understood in order to make sense of the content. 

Some sources recommend keeping alt text descriptions to under 125 characters to account for some screen readers that cut off alt text fields at that point. So, if you need more than a few sentences to describe a complex image, here’s one way you can do it:

  • Write a short alt text summary 
  • Write a full, detailed description of the image on another page
  • Embed a description link under the image (in the body text or caption), which users can click through to read the full description

Another option is to use the “longdesc” attribute to specify the hyperlink to your longer description. In this situation, your alt text might read like “Organizational chart for X company showing executive team position and names. You can see a full description via the link below.”

Let’s get into a few more examples so you can see how these alt text best practices work.

Image alt text examples

Alt text for the above image might look like:

“Man holding an empty ice cream cone creates an optical illusion using a tiny cloud in the sky that looks like ice cream filling the cone.”

Alt text for the above image might look like:

“Wide eyed cat smiles sarcastically at the camera.”

Note that the emotion/feeling of sarcasm might be substituted for happiness, excitement, fear, or shock, depending on the context of how you’re using the image. Since images are often used to convey emotion, if the alt text doesn't do that, users who can't see the image miss out on that experience. After all, it’s not just about the facts and information. Images (and their descriptions) can make a user’s experience more rich, fun, and enjoyable.

Alt text for the above image might look like:

“Organizational chart for the CIA. See longer description below the image.”

Then it’d be accompanied by a longer description underneath, such as:

CIA Organizational Chart

This chart shows that the CIA is headed up by the Director of the National Clandestine Service. This director is in charge of the Deputy Director of the NCS for Community HUMINT, who oversees the Community HUMINT Coordination Center.

The Director of the National Clandestine Service also oversees the Deputy Director, who is in charge of multiple Centers, Divisions, Groups, and Branches. These are the Counterintelligence Center, Counterterrorism Center, Counterproliferation Center, National Resettlement Operations Center, and Information Operations Center. Plus the Latin America, Europe, Central Eurasia, East Asia, Africa, Near East, and Iran Operations Divisions. There’s a Special Activities Division, which includes the Special Operations Group and Political Action Group. There’s the National Resources Division, including the National Collection Branch and Foreign Resources Branch. Finally, the Deputy Director also oversees the Technology Support Divisions.

Tips and tricks

  • Use the tools - Use an extension or tool like SEO Meta in 1-Click to check if any of your images are missing alt text. Or use the Tiny Accessibility Checker plugin directly within your CMS.
  • Use a WYSIWYG editor - It’s usually easier to add alt text to your images using a WYSIWYG editor like TinyMCE, because you can simply click on the image, edit the settings, and then add your description to the alt text field.
  • Image names matter too - Don’t forget to also name your images with something relevant (team-photo.jpg, not image1024.jpg) as this adds another bit of information to the page (that can potentially be keyword rich) other than the alt text.
  • Test with a screen reader - It’s a good idea to test your page’s accessibility with screen reading software. Do your best to put yourself in the shoes of someone who would access your site this way. Close your eyes and see if there’s any important information missing. Pay attention to how the page and information flows.
  • If in doubt, write the alt text - Users who use screen readers skip ahead and jump around the page just like users who don't. If a user isn’t interested in your image descriptions, they’ll likely skip ahead after the first few words. But it’s important to provide the description so they have the option to read it (or not) in the first place.

Start improving your alt text today

Lightbox displaying text

Adopting alt text best practices can be super overwhelming, especially if you have an existing website with lots of images. (We know this because here at Tiny, we’re also in the process of making our content more accessible!)

But don’t let the overwhelm stop you from getting started today. Make a plan to work through your site bit by bit. And most importantly, make sure you follow alt text best practices for all your new content moving forward. Be sure to share this info with your content creation team so they’re on board too!

We’ll be back with more content around alt text and accessibility in the next couple of months so make sure you’re following us on Twitter.

AccessibilityDesign
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Group of categories and tags made from the section titles within the related article.
    Tips & How-Tos

    16 features to include on your blog feed

    by Ben Long in Tips & How-Tos
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor