Image Accessibility

Rule #1: image must have an Alt attribute (Alt text).

Alt text could be:

  • Descriptive
    •  Descriptive Alt text conveys the meaningful content and functionality of an image. It is read by screen readers (accessible to visually impaired users)
    • Descriptive Alt text is shown in place of the image, any time the image is not available (accessible to visually impaired users and sighted users)

  • Empty (blank)
    • Empty Alt attribute is used for decorative image (no need to be accessible to visually impaired users)
    • Empty Alt attribute is ignored by screen readers (e.g. JAWS)

Why an HTML image Alt text doesn't show on hover?

ALT text displays as a tooltip (balloon text) years ago with IE on hover if there is no Title attribute given. This only happened with IE7 browser and previous IE versions. A lot of IE long time users have assumed that the appearance of balloon text proves the presence of an Alt text.

The truth is: The Title attribute is shown as a tooltip on hover for any browser.

Starting IE8, Alt attribute stops to display tooltip in IE. Only the Title attribute displays it, just like in all other browsers.

Demo of Title Attribute:

Image with ALT text:
(Balloon text does not appear on :hover)
Sea creatures
Image with ALT text and Title
(Balloon text appears on :hover)
The falling leaves

Tooltips

Tooltips are limited to mouse users. They are not accessible to keyboard users. Screen readers do not read balloon text displayed by the Title attribute. So, Title attribute for an image is not an accessibility requirement.

Note: The function of the Title attribute is to enhance user experience; it should not be a redundancy or annoying popup element. It should be used considerately.

Inserting an image in SharePoint

The Insert Image tool on SharePoint ribbon provides an Alt attribute field to enter the image Alt text, but there is no field available to enter a Title attribute. Adding a Title is done in HTML code view. College Web Publishers are not required to know HTML and work in code view.