Alt attribute
From Wikipedia, the free encyclopedia
- The correct title of this article is alt attribute. The initial letter is shown capitalized due to technical restrictions.
The alt attribute is used in HTML documents to specify text which is to be rendered when the element to which it is applied cannot be rendered. In HTML 4.01, the attribute is required for the img
and area
element types. It is optional for the input
element type and the deprecated applet
element type.
Alternative text is especially useful in the following situations:
- For people with low bandwidth connections, who may opt not to load graphics
- For people using handheld devices
- For people with disabilities who use assistive technology, such as refreshable braille displays or screen readers
- Search engine optimization: most search engines interpret the meaning of objects by analysing their alt attribute
In the early years of Internet development, alternative text was particularly helpful to people using text-only browsers (like Lynx). Nowadays, even when graphical capabilities are taken for granted, alternative text is still highly appreciated by users with accessibility requirements and users looking for ways to optimize their network bandwidth use.
While the use of meaningful alt text is necessary to comply with accessibility standards, and is good practice, sometimes an image is used for purely decorative purposes. In this case, one should use an empty alt attribute (alt=""
).
The alt
attribute is commonly, but incorrectly, referred to as an image's "alt tag". It is not intended to provide "pop up" text or tooltips when a user's mouse hovers over the image, though alt text has historically been presented in this way in some web browsers; HTML's title
attribute is intended for supplementary information that can be used in this way. (To use alt
correctly and suppress the tooltip that some web browsers generate, a web author can use an empty title attribute.)
[edit] Example of usage in HTML
<img src="button_headline.png" alt="Welcome to our website!">