If you’re using a web editor, look at the image upload menu to find a button or field for alt text. If you have one, fill it in with your description and you should be good to go.

If not, you should contact your developers and ask them to add that feature! In the short term, ask them to make some simple edits to the page’s HTML code as a quick fix.

In the code editor, find the image’s tag, which appears as <img src=”…”>

Inside of the image tag’s brackets, you’ll need to add alt=”your alt text here”, replacing the text in quotes with your alt text.

Once your image has alt text, you won’t notice a visual difference, but it will be announced to anyone using a screen reader. Just having alt text isn’t enough, though: the alt text must be useful, concise, and easy to understand.

Writing alt text can be deceptively difficult. It’s important to remember that blind users won’t see the image on your page, and the alt text is meant to replace it. It’s often said that a picture is worth a thousand words, but we need to keep our descriptions short to make sure we’re not irritating and obstructing blind users while they’re reading our pages.

Think about the image’s purpose

When you’re writing alt text, consider your image’s meaning in the context of the page.

What do you expect viewers to get out of it? What are the most important parts? Is it conveying an emotion? Does the image have text on it that the user should know? It may help to write down some notes on the key points you want to include.

Once you know what you want to include, you need to find the best way to convey that information. Write a sentence or two that hits all your points and then edit it and try to whittle it down. Your goal is to keep the essentials and build a description that captures the image without a visual reference. It takes some practice and a few editing passes, but it will become easier as you get more comfortable with alt text.

Most alt text should be one to two sentences with a length of 8 to 12 words, although you can go longer if necessary.

If your image is very detailed, you may need to link to a supplemental description with more text. This is especially true for charts and graphs, which might benefit from a linked page with data tables.

Any relevant text that’s in the image should be repeated in the alt text—for instance, signs with important information like location or hours of operation. Remember, text on images won’t be read by screen readers, so repeat whatever you expect sighted users to take notice of.

If your image is meant to convey an emotion for viewers, try to capture that same emotion in your description.

Describe what is important about the image; for instance, if you have a stock photo of a family, you might say, “Family smiling on a sunny day” to communicate the emotional content of the image. But if your image is instructional, you would want to communicate the instructional content: “A wrench tightens a bolt by rotating clockwise”.

When a screen reader encounters an image, it will let users know by saying something like “image,” so you shouldn’t say that it’s an image. However, if your image is something other than a photograph (for example, a drawing or painting) you should include that in the alt text.

When your image is a link, your alt text should inform users of the link’s destination rather than describe the image. For example, if a page has a faucet icon linking to a page to pay water bills, the alt text should say “Pay your water bill”, not “Faucet”.

Don’t re-state information from near the image on the page. If your image already has a caption that says exactly what your alt text would say, you don’t need to say it again. For example, an image of the Harold Washington Library with the caption “Harold Washington Library” would not need additional alt text, unless you’re adding additional information from the image. If your image doesn't need alt text, make sure to add null alt text instead!

It’s important that all images have an alt attribute. Leaving alt text untouched is not acceptable: even if you meant to leave it blank, people (and technology) will just assume you forgot about it if there’s no alt tag.

However, not all images are important enough that they should be announced to screen reader users.

Some images we use on the web add no value to the page, like those meant to divide sections. These are called “decorative images.” You can indicate that an image is decorative by setting its alt field equal to a set of quotation marks with nothing in between(alt=””).

For an image to be considered decorative, it should meet at least one of these criteria:

• Image used as part of page design, such as a divider.
• Adjacent text already explains the image, such as a caption.
• Image is in the same link wrapper (<a> tag) as text that explains the link destination.

If you’re not sure if an image is decorative, play it safe and give it alt text. Most users who rely on screen readers would rather have a little extra information than miss out on something important!