The alt attribute is an HTML attribute used in the HTML and XHTML documents to specify the alternative text ( alt text ) to be provided when the applied element can not be given.
The alt attribute is used by the "screen reader" software so that people who listen to webpage content (for example, a blind person) can interact with this element. Each image must have an alt attribute to be accessible, but it does not need to contain text. This could be an empty or zero attribute: alt =
.
Attributes introduced in HTML 2 and in HTML 4.01 are required for the img
and area
tags. This is optional for the input
tag and the applet
tags that are no longer in use.
Video Alt attribute
Contoh
The following image for the alt attribute is "In the sky flying red flags with white crosses that vertical bars shifted toward the flagpole."
The HTML for this image may look like the following:
A blind reader using a screen reader like Orca will hear the alt text in place of the image. A text browser such as Lynx will display alt text instead of the image. A graphical browser will usually only display an image, and will display alt text only if the user requests it to display the image property or has configured the browser to not display the image, or if the browser can not retrieve or to decode the image.
Alternative alt attribute value is "Flag of Denmark".
Maps Alt attribute
Common misconceptions
The alt
attribute does not always have to literally describe the contents of the image. Remember the purpose and context of the image and what will be useful for someone who can not see it. The alt attribute should be an alternative for the image, usually specifying the destination. For example, a warning image can not have alt text "triangles against yellow backgrounds, black borders, and exclamation marks," but enough "Warning!" - unless, of course, the purpose of alt text is to show what the warning symbol really is.
Internet Explorer 7 and the previous rendering text in the alt attribute as the tool caption text, which does not meet the standard. This behavior causes many web developers to abuse alt when they want to display tooltips that contain additional information about the image, rather than using the title
attribute intended for that use. As the alt attribute of Internet Explorer 8 no longer renders as tooltips.
The alt attribute is generally, but incorrect, referred to as "alt tag".
Decorative image
The W3C recommends that images that do not convey information, but are purely decorative, are specified in CSS rather than in HTML markup. However, it's sometimes necessary to include a decorative image as a img
HTML tag. In this case, if the image really does not add content, the empty alt attribute must be entered in the form alt = ""
. This makes the page navigable for screen reader users or non-graphical browsers. If (breaking the standard) no alt attribute is provided, then browsers that can not display images will still show something there, e.g. Image URL, or fixed text string.
See also
-
longdesc
attribute
Note
References
- Includes images:
IMG
element (specifically, how to specify alternate text) from HTML 4.01 specification - The
img
element (in particular, the requirement to provide text to act as an alternative to images) from the HTML 5 specification - Techniques for WCAG 2.0 (specifically, H37: Using the
alt
attribute on theimg
element) - Provides equivalent text for images from Dive Into Accessibility
- Use Correct Alternative Texts from WebAIM
- Guides on alt text in
img
elements by Jukka Korpela - Alternate text for images: alt attribute by Estelle Weyl
- Mini FAQ about Ian Hickson's alternative text images
External links
- Useful bookmarks for alt attribute management [1] [2]
Source of the article : Wikipedia