The university continues efforts to foster a more respectful and inclusive community in response to recent events. More

×

How to add alternative text to photos and graphics

What is alternative text?

The alt attribute is an attribute of the img tag and is meant to be an alternative for non-visual browsers when they come across images. In other words, the text is meant to be used when the image is not visible on the page. Instead, what is displayed (or read) is the alternative text.

Where do I put the alternative text?

Use the alt attribute on your image:

  • <img src="campus-green.gif" alt="Westfield State Campus Green" />
  • If you are using a WYSIWYG editor enter the text in the Alternative Text field (some may vary)
  • If you are using the WYSIWYG editor in Expression Engine:

    Adding Alternative Text to new images:
    1. Select the Image icon and upload or locate your image
    2. In the Image Properties box add text in the Alternative Text field
    Image Properties for Alternative Text

    Updating Alternative Text of an existing image:
    1. Right click your image
    2. Select Edit
    3. Add text in the Alt Text field
    Image Property for Alternative Text

How to write good alternative text for images

  1. Be brief.  Some browsers may actually break if the alt text is too long.
  2. Be clear.  Don't be so brief that the context is confusing. Remember, some people will ONLY see the text in your alt tags, so if it's too brief they might not understand what you're trying to show them.
  3. Be contextual.  Don't describe the image if it's meant to be viewed in context. Example: If you have an image of the University logo, you should write "Westfield State University" and not "Westfield State University Logo".

Examples:

  • campus - good
  • campus green - better
  • the campus green on a sunny day with seven trees surrounding the area and a chair to the left of Ely - too much