Image Alt & Long Description Attribute

Alt Attribute

Whenever an image is included within instructional materials, it should always include some accompanying information to help describe the image and it’s significance to a vision impaired user. When we talk about images in web design, we have many methods available to add accessibility. The foremost of these methods is to add alt tags to all images that we have included.

Alt tags are included as an attribute of the <img> tag. The alt attribute is read buy assistive technologies such as a screen reader but not printed to the computer screen. An alt tag attribute should include a description of the image it is attached to. When a screen reader comes to an image, regardless of it having an alt tag attribute, it will verbally say “Graphic” followed by the alt tag’s included description. If the alt tag is not included, the user will simply hear, “Graphic” with no explanation of what the graphic is. The description of the image can vary depending on its context.

Alt tags should be no longer than 125 characters (including whitespace), otherwise JAWS screen reader will subdivide the description. If your description is going to be longer than the 125 characters, you will need to use the Long Description attribute.

(Insert code in action)

Long Description Attribute

Long Description (longdesc) allows authors to provide a longer description of an image that you can with the alt attribute by using a separate HTML page. Rather than inserting the description in the quotations provided after the longdesc attribute, you would put a URL in its place. The URL will point to a separate page that can accurately provide the description without length or content restriction.

(Insert code in action)