“Alt attribute”的意思、由来-开放百科全书

The alt attribute is the HTML attribute used in HTML and XHTML documents to specify alternative text (alt text) that is to be rendered when the element to which it is applied cannot be rendered.

The alt attribute is used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element. Every image should have an alt attribute to be accessible, but it need not contain text. It can be an empty or null attribute: alt=.^[1]

The attribute was introduced in HTML 2^[2] and in HTML 4.01 was required for the img and area tags.^[3] It is optional for the input tag and the deprecated applet tag.

Example

Here is an image for which the alt attribute is "In the sky flies a red flag with a white cross whose vertical bar is shifted toward the flagpole."

A visually impaired reader using a screen reader such as Orca will hear the alt text in place of the image. A text browser such as Lynx will display the alt text instead of the image. A graphical browser typically will display only the image, and will display the alt text only if the user asks it to show the image's properties or has configured the browser not to display images, or if the browser was unable to retrieve or to decode the image.

Common misconceptions

The alt attribute does not always have to literally describe the contents of the image. Keep in mind the purpose and context of the image and what would be useful to someone who cannot see it. The alt attribute is supposed to be an alternative for the image, usually stating its purpose. For example, an image of a warning sign should not have alt text “a triangle with a yellow background, black border and an exclamation mark”, but simply “Warning!”—unless, of course, the alt text's purpose is to show what the warning symbol actually looks like.

The alt attribute is commonly, but incorrectly, referred to as the "alt tag".^[5]^[9]^[10]

Decorative images

The W3C recommends that images that convey no information, but are purely decorative, be specified in CSS rather than in the HTML markup.^[11] However, it may sometimes be necessary to include a decorative image as an HTML img tag. In this case, if the image truly does not add to the content, then a blank alt attribute should be included in the form of alt="". This makes the page navigable for users of screen readers or non-graphical browsers. If (in breach of the standard) no alt attribute has been supplied, then browsers that cannot display the image will still display something there, e.g. the URL of the image, or a fixed text string.

See also

Notes

1. ^"Alternative Text", WebAIM, last updated 3 September 2015.
2. ^{{Cite web |url=https://tools.ietf.org/html/rfc1866 |title= Hypertext Markup Language – 2.0 | publisher=World Wide Web Consortium}}
3. ^{{Cite web |url=http://www.w3.org/TR/html401/struct/objects.html#adef-alt |title=13 Objects, Images, and Applets |publisher=World Wide Web Consortium |date=24 December 1999}}
4. ^{{cite web | url=https://developer.mozilla.org/en/Mozilla_Web_Developer_FAQ#Why_doesn.E2.80.99t_Mozilla_display_my_alt_tooltips.3F | title=Why doesn’t Mozilla display my alt tooltips? | accessdate=22 July 2009}}
5. ^¹{{cite web | url=http://annevankesteren.nl/2004/12/alt-attribute | author=Anne van Kesteren | title=Alt attribute (alt tag, alt tooltip) | date=16 December 2004 | accessdate=22 July 2009}}
6. ^[https://bugzilla.mozilla.org/show_bug.cgi?id=25537 Bug 25537 - Alt text is not displayed as a tooltip over ], Mozilla bugzilla
7. ^{{cite web | url=http://www.w3.org/TR/html4/struct/global.html#h-7.4.3 | title=7.4.3 The title attribute | author=W3C HTML WG | date=24 December 1999 | work=HTML 4.01 Specification | publisher=W3C | accessdate=22 July 2009}}
8. ^{{cite web | url=http://msdn.microsoft.com/en-us/library/cc288472.aspx#access | title=What's New in Internet Explorer 8 – Accessibility and ARIA | publisher=Microsoft | work=MSDN | accessdate=22 July 2009| archiveurl= https://web.archive.org/web/20090228115639/http://msdn.microsoft.com/en-us/library/cc288472.aspx| archivedate=February 28, 2009| deadurl= no}}
9. ^{{cite web | url=http://www.456bereastreet.com/archive/200511/its_alt_attribute_not_alt_tag | title=It’s alt attribute, not alt tag | work=456 Berea Street | author=Roger Johansson | date=7 November 2005 | accessdate=22 July 2009| archiveurl= https://web.archive.org/web/20090608091747/http://www.456bereastreet.com/archive/200511/its_alt_attribute_not_alt_tag| archivedate= 8 June 2009 | deadurl= no}}
10. ^{{cite web|url=http://www.autisticcuckoo.net/archive.php?id=2004/07/20/tags-elements-attributes |title=Alt tags |work=The Autistic Cuckoo |date=20 July 2004 |author=Tommy Olsson |accessdate=22 July 2009 |archiveurl=https://web.archive.org/web/20071225050529/http://www.autisticcuckoo.net/archive.php?id=2004%2F07%2F20%2Ftags-elements-attributes |archivedate=25 December 2007 |deadurl=yes }}
11. ^{{cite web|last=W3C|title=Embedded content - HTML 5|url=https://www.w3.org/TR/html5/embedded-content-0.html#a-purely-decorative-image-that-doesn't-add-any-information }}

Example

Common misconceptions

Decorative images

See also

Notes

References

External links