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:
Add alt text to an image in a Text/HTML module
Click the photo in the Text/HTML module so that it is highlighted. You will notice the blue border and handles in the corners. The Image Toolbar displays.
- Click the T icon to display the Alternate Text dialog.
- Add your text and be sure to press Update to save your addition.
- 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).
