The alt attribute text will display in the event the user cannot view the image. This can be due to a slow connection or an incorrect src attribute.
If a user has a visual impairment a screen reader may be used. The alt attribute text is read out by the screen reader.
If an image is used to convey a message or prompt an action, the point of the image should be given as the alt attribute text.
The following image demonstrates a visual prompt for a student to take notes - with the correct alt attribute text: "Take notes".
Alternative demonstration example for screen readers.
Following is the code required to include an alt attribute within an img tag.
<img src ="notepad.png" alt="Take notes!" />
The following image is the same example of a visual prompt for a student to take notes but instead of using the alt attribute to convey the purpose it describes the image.
Alternative demonstration example for screen readers.
A common error is to describe the contents of the image rather than the point of the image.
Following is the code containing incorrect alt attribute text. This text describes the image rather than its purpose.
<img src ="notepad.png" alt="pad and pencil" />If the image is purely decorative and conveys no meaning, including alt attribute text will cause a screen reader to read out this text. In this situation the alt attribute should have no value/text (this is described as being set to null).
Images that display via Cascading Style Sheets (CSS) are ignored by assistive technology.
The image below demonstrates an example of a decorative image with the alt attribute text set to null.
Alternative example for screen readers.
For a decorative image the alt attribute should be included but set to null as follows:
<img src="front-image.jpg" alt=""/>A decorative image is generally non-informative and therefore information about the image is not required.
A common error is to describe the decorative image. The image below demonstrates the incorrect descriptive alt attribute text: "front image".
Alternative example for screen readers.
The following is code demonstrating the incorrect use of the alt attribute when an image is purely decorative.
<img src="front-image.jpg" alt="front image" />This will assist users with visual impairments.
In this example the background image of the link is decorative and displays via a style sheet and is therefore ignored by assistive technology. When using a screen reader the text of the link will convey the point of the link.
Buy NowUsers with screen readers will not be able to hear the text contained within the following image.
When a user uses a screen reader to read aloud the content of a page, that user requires helpful information to aid navigation around that web page or web site.
If the image is a link the alt attribute text should not describe the image, only where that link will take the user.
The image below demonstrates an example of an icon of a house used as a visual link to a home page of a web site, therefore the alt attribute text 'home' is sufficient.
Alternative example for screen readers.
The following code demonstrates the alt attribute text that should be used.
<img src="home.png" alt="home" />A common error is to describe the image, rather than the destination of the link.
The image below demonstrates the same example of a icon of a house used as a visual link to a home page of a web site. However, in this situation the alt attribute text contains a description of the image rather than the destination of the link.
Alternative example for screen readers.
The following code demonstrates the incorrect alt attribute for an image used as a link.
<img src ="home.png" alt="small house icon" />
This will assist all users to comprehend the complex information. It will particularly provide those using a screen reader with all the information intended to be conveyed by a complex image such as a graph.
A summary of the image content should be contained within the alt attribute and detailed information regarding the content and context of the image should follow immediately after the image.
The following example is from the WebAIM.org (Opens in new window) web site. It demonstrates the required detail for the alt attribute and for the accompanying text explanation.
If you are using a screen reader to read this example, to have it read in the correct context please view screen reader alternative.
This graph shows the percentage of total U.S. non-institutionalized population age 16-64
declaring one or more disabilities. The percentage value for each category is as follows:
Data retrieved from 2000 U.S. Census (Opens in new window)
This will assist users with auditory and/or visual disabilities.
Transcripts can be accessed by devices to assist accessibility such as screen readers and refreshable Braille devices.
Note:
For audio only - a transcript is sufficient.
For video - synchronised captions and transcripts should be used.
The web site captured in the screen print below demonstrates excellent use of a transcript to access the context provided by the audio content (outlined in red).
To access a live example of the use of transcripts, the site shown below can be found at: http://toolboxes.flexiblelearning.net.au/demosites/series13/13_03/content_sections/listen/index.htm (Opens in new window)
Synchronised captions assist users without access to the audio content of a video.
It can also be useful for those users who are not fluent in the language of the audio.
The web site captured in the screen print below demonstrates excellent use of controllable and synchronised closed captions (outlined in red).
To access a live example of the use of controllable and synchronised closed captions, the site shown below can be found at: http://toolboxes.flexiblelearning.net.au/demosites/series13/13_03/content_sections/listen/index.htm (Opens in new window)
The agreed VET file formats are part of the VET e-learning content standards.
The E-standards identify applicable standards for functionality and technology utilised for e-learning in the VET sector and are intended to facilitate interoperability of learning resources and systems and remove barriers to e-learning.
Below is a list of the recommended formats for desktop content.
For a more details explanation on the use of these content formats see the New Generation Technologies for Learning - Technical Standards - Content Formats.