Tips-for-Writing-Effective-Alt-Text-for-Your-Website-Why-It-Matters-Blog@2x-100

3 Tips for Writing Effective Alt Text For Your Website — & Why It Matters

05/18/2023
5 minutes

A good website puts the user first and provides everything they need to have a great experience. This includes users with physical or cognitive disabilities.

Unfortunately, people often forget about accessibility features while they’re building a website. But accessibility, which involves designing for people with physical or mental impairments, is a pillar of web development. In the U.S., accessibility is mandated by law (plus it’s the right thing to do) and there are even careers centered around digital accessibility.

Using alt text is an easy way to make your websites and digital content more accessible. So, in honor of Global Accessibility Awareness Day, here’s a quick breakdown of how (and why) you should use it.

What is alt text?

Alternative text (aka alt text, alt tags, or alt descriptions) describes digital images with details and context that help paint a picture for the user. It’s implemented using HTML’s tag attribute, so you can also find and edit it in the source code. Here’s an example of what alt text describing a photo of a brown bear looks like in some HTML code:

<!DOCTYPE html>

<html>

 <head>

   <title>My First Web Page!</title>

 </head>

 <body>

<img src="https://en.wikipedia.org/wiki/File:Brown_bear.jpg" alt="A brown bear"/>

 </body>

</html>

Alt text is especially helpful for people with visual impairments that may use screen readers or braille displays to navigate websites, because it reads a description aloud or renders one in braille that clarifies what the image is meant to convey. But alt descriptions also come in handy for users with older devices or slower connections, because they enables users to read content without loading images.

Alt text helps ensure accessibility (and inclusivity) and helps provide a better user experience. Another bonus? Having alternative text helps make your digital content more indexable on search engines. Search crawlers use it to better understand the content of your images and how they fit into the context of your web page. By including alt text, you also open the door to more organic traffic by making your images indexable for Google Images searches.

How do you write good alt text?

Many content management systems (CMSs) like WordPress or Wix allow you to write alternative text for images that you add to a website. And if you’re coding a website from scratch, you can add it to your web page’s HTML. (Check out our free course Learn HTML to learn how.)

You can also add alt text to the pictures and gifs you share on some social media sites, like Twitter and Instagram. Alternative descriptions paint pictures for the user, but good alt text is characterized by two things: detail and context.

Add relevant info

The first step to writing good alt text is to describe the scene depicted in your image. Think about what you would say if you were describing the picture to someone who cannot see it.

A person with headphones sitting at a desk with a water bottle, iPhone, monitor, and keyboard, in a dimly lit room.

Take the image above. A simple alt description could look something like this:

A person sitting at a computer.

This alt text is functional, but could be better. Let’s try adding some detail.

A person with headphones sitting at a desk with a water bottle, iPhone, monitor, and keyboard, in a dimly lit room.

Paints a better picture, doesn’t it? In some cases, you’ll want to go even further. For example, say you post an image of a famous painting. Instead of just describing it in the alt description, you could provide its title, medium, artist, and any other relevant context.

The image’s location on a web page also plays a role in context. For example, if you’re adding an image to the body of a blog post, you might want to add keywords relevant to the subject matter. Since this blog post is about a coding topic, we might use the following for the image above:

A programmer sitting at a desk with headphones on learning about the basics of Machine Learning on Codecademy.

Then, the alt text in the markup of your website would look something like this:

<!DOCTYPE html>

<html>

<img src="https://codecademy.com/resources/blog/images/programmer_machine_learning.jpg" alt="A programmer sitting at a desk with headphones on learning about the basics of Machine Learning on Codecademy."/>

 </body>

</html>

Keep it short & sweet

You should provide enough information in your alternative text for your user to understand what they need to know, but you’ll also want to be mindful of character limits. Screen readers will cut off alt descriptions after somewhere between 125 and 140 words, and you don’t want to leave your users hanging.

But there are also more complex images, like charts and infographics, that need more details than can be provided in a few words. In these cases, you can link to a longer description posted elsewhere on the site right from your alt text.

Be selective

We know you want to make your website as accessible as possible, but not every single image requires an alternative description. You should leave alt tags empty for decorative and functional images, which include things like calls to action (CTAs) or pictures meant to illustrate in-text examples.

The illustration at the top of this blog, for example, is a decorative image, so it doesn’t need alt text. You also want to avoid providing any information that’s parroted in the accompanying text. If you need help figuring out whether or not you should alt text, W3C provides this decision tree to help you choose.

Learn more about accessibility

Adding alt text to your digital content is a great start, but there’s a lot more you can do to make your websites accessible for all users. Check out our free course Learn CSS: Accessibility to learn more about designing for people with physical or cognitive impairments. You can also learn more about accessibility on W3C’s Web Accessibility Initiative and AccessibilityChecker.org.

Related courses

3 courses

Related articles

4 articles
Header-Image_2083x875-14.png?w=1024

What Is Splunk? 

03/04/2024
5 minutes
By Codecademy Team

Learn how Splunk makes big data analytics easier by helping organizations monitor their data and derive insights through machine learning.