Please enable javascript to view this page in its intended format.

Queen's University

Winter 2012 Newsletter

What You See Isn't What I Hear

Did you know that approximately 15% of the Canadian population (over 4 million people) have reported some type of disability? Consequently, web content authors have the potential to negatively impact thousands and possibly millions of people in Canada alone. This is not intentional. It is often done unknowingly by the inappropriate use of web page design elements and attributes. In many cases, no one is more surprised than the technically astute content authors, who are unaware of how assistive devices, such as screen readers, work or how the use of text size and color can eliminate readability entirely.


Web Accessibility and Images


This article focuses on web page images and web accessibility. Images, such as photos, illustrations, icons, logos, etc., are not viewable by millions of web browser users. Although images represent a useful approach to enhancing web pages as well as to improving accessibility, it is also important to convey the image information in an alternate form, outside of the image. Following this practice will ensure that people who cannot view an image still have access to the image information. The Alt ("alt=") attribute of the image tag ("img=") exists for this specific purpose.


The Alt attribute is an essential element of web accessibility. When used appropriately, an "alt=" specification allows web page visitors who depend upon screen readers to obtain the necessary information they need about the content of web page images. A screen reader is a software application that enables people with severe visual impairments to use a computer. With regard to web pages and images, the screen reader uses a speech synthesizer to read back the text enclosed inside the Alt attribute. If the Alt attribute is blank or ambiguous, so is the image, and thus what a sighted person sees is not what a blind person hears.



Some common mistakes include:

  1. Not specifying an Alt attribute on the image tag.
  2. Specifying an Alt attribute on the image tag, but leaving it blank (alt="") for content images.
  3. Specifying inappropriate or ambiguous content in an Alt attribute. Some of these include:
    • referencing images with: alt="image" or, alt="pic1", alt="pic2", and so on
    • alt="go" for multiple image buttons that link to other documents or parts of a page
    • a series of alt="click here" with no other information on where the viewer is going
    • referencing an image comprised of text with alt="example words" or alt="my phrase"
    • referencing an image on a form with an alt="instructions", with no text alternative of actual instructions
    • a business or company page with their image using alt="logo", which is particularly troublesome in searches


The following are recommendations for the appropriate use of the Alt attribute whenImage of a computer keyboard with a disability symbol on the space bar using images on web pages to make the information in them accessible to all viewers:


  1. If an image contains only words, the Alt attribute should contain the exact same words.
  2. An image used for spacing or layout should have a blank Alt attribute (alt="").
  3. An image without text should contain an Alt attribute with a brief and accurate description.
  4. High content images, such as illustration graphs, should provide a complete description using the "Longdesc" attribute. The "Longdesc" attribute is ideal for providing descriptions of image content and may also include a URL to a text document for very complex images.
  5. Complex images should contain an Alt attribute that is also "content relevant".
    Some examples include:
    • Images of people or animals that are not portraits should have an Alt attribute that includes image description and activity, e.g., Image of our black lab 3 feet in the air with the red frisbee he caught in his mouth.
    • Images that depict perspective or relational information should have an Alt attribute that includes the intended perspective or relationship, e.g., Image of our black lab and daughter Mary, where Mary's head is a few inches taller than our dog's head now!

Resources and More Information:







Kingston, Ontario, Canada K7L 3N6 613.533.2000