Jul 28, 2005

HTML Email for the Visually Impaired

Here’s an interesting article that explains the pros and cons of plain-text vs. HTML email, but from the perspective of a visually impaired recipient, who has the email read to him using JAWS (Job Action With Speech). From now on, I’ll make an extra effort to put ALT and TITLE attributes into images and hyperlinks (for HTML Email), and to not use so many of those ASCII characters to divide sections of my plain-text emails.   

For those of you who aren’t HTML gurus, we’ll explain a little bit about ALT and TITLE attributes…

Generally speaking, you always want to include an "ALT" attribute in all your image <IMG> tags when you code a web page. It’s a "required" element for proper HTML coding.

For example:
<IMG SRC="http://www.mysite.com/images/monkey-image-here.gif" ALT="Picture of a cool monkey!">

That way, if someone should happen to visit your web page with his browser set to "Images turned off," a text description will be displayed where the image would normally go. This is really helpful for people on slow connections, who keep images off. It’s also really helpful for the visually impaired, because their software can’t explain pictures to them—they can only read the ALT TEXT out loud. You can see why ALT TEXT would be critical if your website navigation was composed of images, instead of regular text links.

TITLE attributes are optional, but very handy. You can put TITLES on lots of things, like images, links, tables, form text fields, and more. When you hover over an object on a web page with a TITLE attribute on it, you’ll see a little popup tool-tip to explain what the object is.

Example of the TITLE attribute:
<A HREF="http://blog.mailchimp.com" TITLE="This link takes you to the MailChimp website">Click here!</A>

You can use the ALT text attribute on an image, then place a hyperlink with a TITLE around the image. If the image is off, its ALT text will show. If you hover over the image, your TITLE will popup as a tooltip.

Extra helpful info in this article:
http://www.netmechanic.com/news/vol6/html_no1.htm, in case you want to read up on it more.

Using ALT/TITLE attributes in HTML Email
ALT TEXT and TITLES behave slightly differently depending on the email application (no surprise there). I ran some quick tests, using an HTML email message that contained lots of images, links, ALT text, and TITLES. I sent it via MailChimp to a Mac OSX (10.4) and a couple of Windows XP test machines. Here’s what I found…

  • Lotus Notes 6.5.3 would not display ALT text on images, nor TITLES on links.
  • If you code an image that also links to a web page, some email apps (Outlook2000 and Apple Mail) override both the ALT and TITLE, and show the URL of the link instead. They do this for security, so you see where the link takes you before you click.
  • AOL9, Yahoo!Mail, Hotmail, and Gmail all behaved pretty much as expected. ALT text worked on images, and TITLES worked on links. TITLES also override ALT text when you hover over images. ALT text and TITLE tags were never replaced by URLs like Outlook did.
  • ALT TEXT seemed to work in Mozilla Thunderbird 1.0 (when images are turned off), but TITLES do not (on images or links).
  • Apple’s Entourage did not display ALT text or TITLES, for images or links. Weird.
  • Eudora 6.2.1.2 was probably the nicest of all. For images, it displayed ALT text, even if the image hyperlinked. But they still displayed the hyperlink down in the status bar of the window, for paranoid clickers like me. Hover over an image, and it displayed the TITLE as a tooltip (instead of the ALT text). Hover over links, and the TITLE appeared as a tooltip.

Bottom line? Put ALT text on all your images to describe what they are. Optionally, put TITLES on all your images, to give more detailed descriptions. Put TITLES on all your hyperlinks