How to add alt text to images

Adding alt text to your images is a great way to:

Help visitors understand your site's content if they are using an assistive screen reader or a browser that has images disabled.
Provide data that helps search engines understand your site's content. This may, in turn, boost your site's SEO (search engine optimization) ranking.

If your visitor's web browser can't display an image on your website, it will display the alt text value instead. As a result, it is recommended that you add alt text to your images that:

Includes short terms
Describes the image
Is directly related to the page's content

With eCatholic, here's how you can add alt text to images placed within a Text/HTML module:

1

Add alt text to an image in a Text/HTML module

Click the photo in the Text/HTML module so that the WYSIWYG toolbar (pictured below) appears. Then, click the image icon located in the top row of tools in the WYSIWYG editor. This will open the Image Properties dialog.
Use the Alternative Text field in the Image Properties dialog (pictured below) to add alt text for the image. Once finished, click the green OK button.
Publish your changes!

2

Optimizing accessibility of other images

There are a variety of other places in which you can add photos on your website. Although the interface doesn't allow you to directly add alt text to images in your homepage slideshow, buttons, and other areas, here are some tips to maximize the accessibility of all your images.

Use descriptive file names for your images (e.g., use a file name such as st-joseph-phoenix-mass.jpg instead of pic12345.jpg)
Avoid using images that include Photoshopped buttons and words.

Example 1: Homepage Slideshow

When uploading an image to create a slide in your homepage slideshow, use the Title, Caption, and Call to Action button features instead of using Photoshop to add words or fake buttons to your images (illustrated below).

Example 2: Custom Buttons

Likewise, when creating custom buttons on your homepage using the button module, use the Button Label and Additional Text fields (illustrated below).