Knowledge Base

How to add the alt text HTML attribute to an image in a signature

Problem:

You would like to add the alternative text (alt text) HTML attribute to images in your signature to make it more accessible to the visually impaired and comply with applicable requirements.

Solution:

The alt text (alternative text) attribute is used in HTML to describe the appearance or function of an image to people with visual impairment or blindness. This description (along with ordinary text in an HTML document) is read to them by a screen reader. Thanks to that, they can visualize the content they are unable to see. With no alt text added to an image, a screen reader will describe an image as ‘image,’ which is neither informative nor helpful at all.

Since modern, multimedia-rich email signatures, disclaimers, and auto-replies are - just like websites - HTML documents, you should also remember to add the alt text attribute to images that require a description.

Tips before you start

Not all images require the alt text attribute. The ones you use purely for decorative purposes should have the attribute with the null value (alt="").

For the images requiring the attribute, follow these few simple rules:

  • Be specific (tell your user what’s specifically shown in a picture) and keep the description text relatively short. Don’t include the ‘image of’ or ‘picture of’ phrase, as screen readers typically ‘announce’ an image before reading its description.
  • If your image is so complex that it requires a longer description, you can additionally use the longdesc attribute to provide a link to a resource that offers more information about the image.
  • If your signature includes icons in the contract information section (e.g. a phone icon next to phone number), make sure to add alt text to them as well (e.g. alt="phone number"). Thanks to that, your recipient will not end up listening to screen reader reading merely numbers and wondering if they’ve just heard your phone or fax number.
  • If your signature includes image buttons (e.g. as a part of one-click survey), add the alt text attribute that describes their function to them as well, e.g. alt="submit".
  1. To start, log in at app.codetwo.com, choose the signature (or disclaimer or auto-reply) to which you want to add the alt text attributes, and open it for editing by clicking Edit signature (or Edit reply message) on the Design tab (Fig. 1.). If you create a completely new rule, choose a template from template library and adapt it to your needs, or edit your template from scratch before moving on to step 2.

Opening the signature template to add the alt text attribute to existing images.
Fig. 1. Opening the signature template to add the alt text attribute to existing images.

CodeTwo Exchange Rules (Pro)

If you use CodeTwo Exchange Rules (Pro), first open the Administration Panel, choose your signature (or disclaimer or auto-reply*) rule, go to the Actions tab and click Edit (or Edit body for an auto-reply), as shown in Fig. 2. If you create a completely new rule, choose a template from template library and adapt it to your needs, or edit your template from scratch before moving on to step 2.

Accessing signature template in CodeTwo Exchange Rules Pro to add alt text attributes.
Fig. 2. Accessing signature template in CodeTwo Exchange Rules Pro to add alt text attributes.

In step 2 below, use the Source button instead. The HTML source code view window that opens will look a little bit different but the principles will be the same - simply follow the instructions from step 3 and onwards.

* The Auto respond action is available in CodeTwo Exchange Rules Pro only.

  1. Click the HTML source button (Fig. 3.). The window with the source HTML code of your signature will open.

Accessing the HTML source code of your signature template.
Fig. 3. Accessing the HTML source code of your signature template.

  1. Locate all the images in the code by using the Ctrl+F keyboard shortcut and typing <img (Fig. 4.).

Highlighting the image HTML tags to locate all the images more easily.
Fig. 4. Highlighting the image HTML tags to locate all the images more easily.

  1. Now, add alt="" after <img, putting a single space in-between. Type the image description inside the quotation marks, as shown in Fig. 5.

    Tip

    To make sure you’re adding the description to a correct image, look for hints in the preceding attributes / code fragments, for example:

    • the data-codetwo-visible attribute might be useful, as its value (in quotation marks) usually tells you all about the image by reading e.g. 'Logo' or 'Banner';
    • in the case of the social media icons, you can find web address value of the href attribute helpful, e.g. href="https://www.facebook.com/user_name_here" tells you that image (<img) that follows is the Facebook icon;
    • in CodeTwo Exchange Rules (Pro), the value of the src attribute that follows a <img tag might be of some help.

Sample alt text attribute – this one describes the dark yellow button to rate Customer Service as excellent (see Fig. 3.).
Fig. 5. Sample alt text attribute – this one describes the dark yellow button to rate Customer Service as excellent (see Fig. 3.).

  1. Repeat the procedure from step 4 for all the applicable images. A sample code with added descriptions might look, as shown in Fig. 6. below.

All the images have the alt text with description. For the more complex banner, we additionally used the longdesc attribute to provide reference to a resource with more information.
Fig. 6. All the images have the alt text with description. For the more complex banner, we additionally used the longdesc attribute to provide reference to a resource with more information.

  1. When you’re OK with all the changes, click Apply & Close to save them and close the HTML source code view window (see Fig. 6.).
  2. Finally, close the template editor by clicking Apply & Close once again and save the rule for your changes to take effect.

Now, when a person with a vision disability gets an email with your signature and uses a screen reader app, they will be able to better understand the context of your message by knowing more about visuals.

Was this information useful?