Alt text
for images on SREB.org web pages

Private

Alt text is simply a text alternative for images Screen readers read the words for people with visual disabilities who can’t see the images.

For every image you add to a web page, you must consider whether it needs alt text and what the alt text should say.

Ask yourself these questions to decide.

Active image

Does the image have a function? Does it do something? If the answer is yes, this is an active image. Most often, this will be a link. It might also be a button to submit information or expand content. (You will rarely use this kind of image on SREB.org. But if you do, don’t forget to include the function in your alt text.)

Alt text for active images should tell users what the link does or where it will take them. Screen readers will tell users it’s a link, so don’t use “link to” or “go to” — just the destination. Alt text for a linked Twitter logo, for example, wouldn’t say “Click here to go to Twitter.” It would just say “Twitter.”

Information image

Does the image convey information or content? Would the user would miss information if s/he couldn’t see the picture? If so, ask yourself: If I could not use this image, what words would I put in its place?

Alt text for information images should describe the information in the image, not the image itself.  Alt text for a Twitter logo, for example, wouldn’t say “flying blue bird.” It would say “Twitter.”

Decorative image                                  

If the answer to all these questions is no, the image is purely decorative and needs a null alt attribute. The SREB.org CMS takes care of this for you, so you enter nothing in the alt text field.

How to enter alt text

Just type the text into the Alt text field in the Images tab of the post editor.

Images tab, alt text field: Andy Baxter

Five Golden Rules of alt text

1.      Every image must have an alt= attribute.

2.     Describe the information, not the picture.

3.     Active images require descriptive alt text.

4.     Images that contain information require descriptive alt text.

5.     Decorative images should have empty/null alt text.

Alt text dos and don’ts

Do

Consider alt text for every image

Describe content and function

Be succinct

Don’t

Be redundant (with the body text)

Use “image of” or “photo of”

More info

These guidelines are based on these two sources. Please read them in full.

WebAIM Alternative Text

AbilityNet Compliant alt text