Missouri State University

Skip to content Skip to navigation
a b c d e f g h i j k l m n o p q r s t u v w x y z

Web Strategy and Development Blog

  • Web Strategy and Development
  • Web Support
  • @msuweb
Example of WordPress screen for al text

Accessibility series: alt text

Tips for ensuring your website’s images meet accessibility standards

April 3, 2017 by Mary Chiles

Share this post:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Tumblr
  • Email

Welcome to our series of posts entitled: how to make your website accessible! In the first post we discussed the ethical and legal reasoning for why accessibility is important.

Today we focus on adding alternative text to images.

Tips for success

It’s a good idea to add images to posts because it drives readers to your site. But how do we make the image work for everyone?

Imagine the pre-smart phone days. You’ve found an image from your days in Brownie Scouts and want to show your best friend. But she lives six hours away. You could make a copy of the photograph and mail it to her, but you can’t wait! So, you call her up on your landline and tell her about the photo. Similarly, alt text is like describing an image so that the website visitor can understand its meaning.

How much should you say? Here are specific ideas to consider while writing alternative text. Don’t begin the text with the words “an image” or “a photo.” Don’t repeat the caption because it is redundant. Do briefly describe the image.

When blogging

If you post to a Missouri State blog, you use the blogging platform WordPress.  This is how you add alt text within your Missouri State blog.

Screenshot of WordPress page for alt text
Use the Alt Text field when uploading or editing an image in WordPress.

When updating your website

Missouri State webpages are maintained on Web Press. To add images to your site, upload it or select the image in the Asset Manager. You will have the option to add the caption. This is used as the alt text in Web Press.

Web Press screen showing alt text (caption)
Use the Edit Attributes link to add or change the alt text for an image.

How to know if you are successful?

To determine whether your site meets accessibility standards, enter the address into a web accessibility site like WAVE. Find the alt tag on images within the results. If it is green the alternative text is sufficient. If it is yellow it needs attention; it might be too long or too short. If it is red you need to add text.

Screenshot of students taking a photograph of themselves
After you enter your website address into WAVE, review the results for small red, yellow or green squares on each photo to check for acceptable alt text.
  • About the Author
  • Latest Posts

About Mary Chiles

Mary Ellen Chiles is a graduate student in the English department, where she is completing a Master's of Arts in Creative Writing with a nonfiction emphasis.

  • Accessibility series: descriptive links - April 20, 2017
  • Accessibility series: color contrast - April 7, 2017
  • Free photo days for faculty and staff - April 6, 2017
  • Accessibility series: alt text - April 3, 2017
  • Social media kit: Fourth annual Missouri Public Affairs Hall of Fame - February 7, 2017
  • Top 5 reasons to add an event to master calendar - January 17, 2017
  • Blogging inspiration: share an event - November 29, 2016
  • Social Media Kit: Community Engagement Project - November 8, 2016
  • Social Media Kit: Tour of the Globe - November 1, 2016
  • You are my inspiration: ideas to support your blogging - November 1, 2016

Filed Under: Accessibility, Web Press, WordPress blogs Tagged With: Accessibility, alt text, alternative, webpress, WordPress

Share this post:

  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Pocket
  • Tumblr
  • Email

Subscribe

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Follow @MSUWeb

My Tweets

Calendar

  • Complete Calendar

Categories

  • Accessibility
  • brand
  • email marketing
  • Mobile
  • News
  • Omni CMS
  • Redesign
    • Academic websites
    • Web redesign 2015
  • Social media
    • Social media kit
  • template
    • updates
  • Training
  • Video
  • Web Press
  • web strategy and development
    • Technical
  • Web Support
  • WordPress blogs

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Connect with web strategy and development

  • Twitter

Make your Missouri statementMake your Missouri statement
  • Last Modified: December 12, 2018
  • Accessibility
  • Disclaimer
  • Disclosures
  • EO/AA/M/F/Veterans/Disability/Sexual Orientation/Gender Identity
  • © 2013 Board of Governors, Missouri State University
  • Contact Information
loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.
 

Loading Comments...