Difference between revisions of "Web Accessibility:Non-Textual Content"
Jump to navigation
Jump to search
| (21 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | + | Text equivalents are used to convey meaningful information about a non-textual object when it cannot be rendered and/or interpreted by a browser, assistive technology or perceived by the user. Besides providing text-based explanation, they can be used as an opportunity to reinforce the message being conveyed by the image. | |
| − | |||
| − | *ALT attribute- to | + | '''Below you will find a list of recommended best practices that will make your web pages more accessible:''' |
| + | |||
| + | ---- | ||
| + | |||
| + | |||
| + | *'''ALT''' attribute - to display a short description of an image. Some browsers display them as "tool-tips" when a mouse hovers over the image. | ||
Example: <img src ="trigfunc.circle.gif" alt="Circle showing trig functions" width="210" height="200"> | Example: <img src ="trigfunc.circle.gif" alt="Circle showing trig functions" width="210" height="200"> | ||
| − | *LONGDESC attribute - to convey a richer description of an image when the short description is not sufficient to convey the full meaning. This is an HTML link to another web page, however, not all browsers support this attribute. | + | *'''LONGDESC''' attribute - to convey a richer description of an image when the short description is not sufficient to convey the full meaning. This is an HTML link to another web page, however, not all browsers support this attribute. |
| − | Example: <img src ="trigfunc.circle.gif" alt="Circle showing trig functions" width="210" height="200" longdesc="trigfunc.html"> | + | Example: <img src ="trigfunc.circle.gif" alt="Circle showing trig functions" width="210" height="200" <br /> longdesc="trigfunc.html"> |
| − | *D-link or descriptive link - is also used to convey a richer description of an image. This is a separate link associated with the image | + | *'''D-link''' or '''descriptive''' link - is also used to convey a richer description of an image. This is a separate link associated with the image and is used as an alternative to '''<LONGDESC>''' |
| − | Example: <a href="trigfunc.html" title="link to detailed description of image"> D</a> | + | Example: <a href="trigfunc.html" title="link to detailed description of image"> D </a> |
| − | *TITLE attribute- is used to annotate most elements. They are displayed as "tool-tips" by graphical browsers and as text for non-graphical browsers. | + | *'''TITLE''' attribute- is used to annotate most elements. They are displayed as "tool-tips" by graphical browsers and as text for non-graphical browsers. |
| − | Example: <img src ="trigfunc.circle.gif" alt="Circle showing trig functions" title="Circle with a perpendicular triangle showing the sin and cosin of the right angle" > | + | Example: <nowiki><img src ="trigfunc.circle.gif" alt="Circle showing trig functions" title="Circle with a perpendicular |
| + | triangle showing the sin and cosin of the right angle"></nowiki> | ||
*Text Description of Object - this is the description of the richmedia object placed within the <object> element | *Text Description of Object - this is the description of the richmedia object placed within the <object> element | ||
| − | |||
Example: <object classid="<nowiki>http://www.miamachina.it/analogclock.py</nowiki>">An animated clock.</object> | Example: <object classid="<nowiki>http://www.miamachina.it/analogclock.py</nowiki>">An animated clock.</object> | ||
Latest revision as of 12:35, 19 December 2006
Text equivalents are used to convey meaningful information about a non-textual object when it cannot be rendered and/or interpreted by a browser, assistive technology or perceived by the user. Besides providing text-based explanation, they can be used as an opportunity to reinforce the message being conveyed by the image.
Below you will find a list of recommended best practices that will make your web pages more accessible:
- ALT attribute - to display a short description of an image. Some browsers display them as "tool-tips" when a mouse hovers over the image.
Example: <img src ="trigfunc.circle.gif" alt="Circle showing trig functions" width="210" height="200">
- LONGDESC attribute - to convey a richer description of an image when the short description is not sufficient to convey the full meaning. This is an HTML link to another web page, however, not all browsers support this attribute.
Example: <img src ="trigfunc.circle.gif" alt="Circle showing trig functions" width="210" height="200"
longdesc="trigfunc.html">
- D-link or descriptive link - is also used to convey a richer description of an image. This is a separate link associated with the image and is used as an alternative to <LONGDESC>
Example: <a href="trigfunc.html" title="link to detailed description of image"> D </a>
- TITLE attribute- is used to annotate most elements. They are displayed as "tool-tips" by graphical browsers and as text for non-graphical browsers.
Example: <img src ="trigfunc.circle.gif" alt="Circle showing trig functions" title="Circle with a perpendicular
triangle showing the sin and cosin of the right angle">
- Text Description of Object - this is the description of the richmedia object placed within the <object> element
Example: <object classid="http://www.miamachina.it/analogclock.py">An animated clock.</object>
- Descriptors of Video Content is required for visually impaired users. The descriptions of video can be provided on the page or as a link associated with the object. D-links can also be used for text descriptors.
- Text Transcriptions is required for all audio content. The tanscript can be provided as a link associated with the audio object
- Captions are syncronized transcripts of audio and video content.
[1] Back to Main Page