Wikipedia:Alternative text for images

From Wikipedia, the free encyclopedia

This guideline is a part of the English Wikipedia's Manual of Style. Use common sense in applying it; it will have occasional exceptions. Please ensure that any edits to this page reflect consensus.

Shortcut: WP:ALT

Alternative text (alt text) is used as a replacement for an image, whenever the image cannot be seen. Every visible image should have alt text, unless the image is used only for visual formatting or decoration.^[1] The alt text should be brief and should emphasize the image's most important visual aspects: it should summarize the gist of the image rather than describing every detail. Above all, alt text should describe the image to visually impaired Wikipedians who are using assistive technology such as JAWS and Orca. It should also make sense in a graphical browser with images turned off, and it should fit with the surrounding text when viewed with a text-only browser such as Lynx.

Alt text is not the same as a caption. Alt text is meant for those who cannot see the image, whereas the caption is intended for all readers. In general, alt text summarizes the image's appearance, whereas the caption helps all readers interpret the image, to focus on its most essential elements and to connect it with the article text. A helpful way to think about alt text is to imagine that the web page is a script for an audio recording, and that the page's alt text is the part of the recording that describes the image to someone who cannot see the image.

In Wikipedia, images typically act as links and therefore need alt text, which is specified with an "alt=" parameter. Here is an example, specified in the Wikipedia image syntax, next to what its output looks like in your browser.

National flag of France

[[Image:Flag of France.svg|thumb|alt=Vertical tricolor flag (blue, white, red)|National flag of France]]

(If you are using a standard graphical browser and want to read this image's alt text, ask the browser to display the image's properties.)

Math-mode formulas also need alt text, which is specified within the initial math tag. For example, this input:

<math alt="3/5 = 0.6">\tfrac{3}{5} = 0.6</math>

generates this output:

Unlike images, alt text in the math tag takes quotation marks.

[edit] Why it is useful

Alt text is useful, for example, when someone:

• uses a screen reader (e.g., a visually impaired person)
• uses a text-only browser (e.g., browsing from a mobile phone)
• uses a graphical browser with images turned off
• has not yet downloaded the image
• browses results from a Web search
• fails to download the image because of a network problem
• copies an extract from a Web page into a word processor.

Alternative text is also used for other purposes. For example, Google's image search uses it to help return appropriate images. Finally, good choice of alternative text and captions makes life easier for people who are viewing the source of an article, either when editing it, or in a diff, or in Wikipedia's internal search.^[2] For all these reasons, the Wikipedia image use policy recommends alt text for Wikipedia images.

[edit] Difference from captions

A 3rd century BC coin depicts the co-rulers of Ptolemaic Egypt: Ptolemy II Philadelphus (left), and his sister and wife Arsinoe II.

The alt text description should not duplicate information already present in the caption or the main text of the article. However, material can be added to help the listener identify the subject of the image. Here is an example:

[[Image:Oktadrachmon Ptolemaios II Arsinoe II.jpg|thumb|alt=Gold coin showing heads and shoulders of a well-fed man and woman in ancient Greek clothing; the man is more prominent|A 3rd century BC coin depicts the co-rulers of [[Ptolemaic Egypt]]: [[Ptolemy II Philadelphus]] (left), and his sister and wife [[Arsinoe II of Egypt|Arsinoe II]].]]

The alt text describes the coin's appearance, whereas the caption focuses on its explanation. Again, the basic rule is that alt text is written for those who can't see the image, whereas captions are written for everyone.

[edit] When to specify

In the typical case, where a Wikipedia image is a thumbnail that has a link, some alternative text should be specified. Otherwise, the alt text would be empty and a screen reader normally would read the file name, which is usually not helpful.^[3]

A captioned image that is not a thumbnail can omit the alt text when the caption is brief and adequate for alt text. For such images, the alt text defaults to the caption instead of being empty. For example, [[Image:Checkmark green.svg|24px|Green checkmark]] generates an image with alt text and title both set to "Green checkmark".

Icons and other non-thumbnail images without links need not have alt text if the images are decorative and have no function.^[4] Use "|link=" to disable the link that would normally be generated for an image. For example, [[Image:Checkmark green.svg|24px|link=]] generates an image with no link and empty alt text. Removing the link of a decorative image usually improves web usability, because having a link in such case usually confuses the reader. Any such image should be properly credited if its license requires attribution. For example, if the decorative image has a CC-BY-SA license, and the author's name is present in the image that is delivered to the user's browser (either as visible text or as a comment or other image metadata), the use of the image complies with the license when combined with the link to WP:CC-BY-SA that is in every Wikipedia article. A public domain image can be used as decoration without attribution.

The alt text guidelines apply to all images delivered to the user's browser, including images that are in tables and galleries, and images generated from templates.

[edit] What to specify

Alternative text exists as a substitute for the image, for those who cannot see it. The alt text should make sense when read aloud and in the absence of the image itself. It should be composed of complete sentences and punctuated correctly, with screen readers in mind. It should sit comfortably in the flow of the article.

A helpful way to think about alternative text is to imagine that the Web page text, including all alternative text, is the script for an audio cassette. Your listeners aren't necessarily blind, so they may be interested in hearing about what something looks like. But they can't possibly see any images on the cassette, so referring to an image itself will sound silly. If you write your alternative text with this in mind, it should work well in all the situations listed above.

[edit] What not to specify

Alt text should not interpret the image, or suggest its meaning, since that role belongs to the caption. Alt text should not repeat the caption. A screen reader will say both the alt text and the caption, and any repetition will not be helpful. An image's caption typically should say little about visual appearance, which is obvious to a sighted reader. Because alt text should focus only on the visual appearance, alt text and caption typically do not overlap.

Alt text typically should not describe the provenance of an image, or how it was created. Nor should it cite a source for verification. Because alt text should be easily verifiable by a sighted reader, any claim likely to be challenged should instead appear in the caption or other location and supported by a reliable source there. As with all other parts of Wikipedia articles, original research should be scrupulously avoided when writing alt text.

Alt text should not summarize irrelevant details of the image. For example, often it is irrelevant whether an image is color or black and white.

Alt text cannot contain wiki or HTML markup. For example, the following is not valid alt text:

Woman wearing {{circa|1860}} [[hoop skirt]] containing a 3&nbsp;m<sup>2</sup> of cloth

Neither "{{circa|1860}}" nor "[[hoop skirt]]" nor "<sup>" has the intended effect in alt text. The " " is technically valid but unlikely to be helpful.

Alt text should be all on one line, to avoid a MediaWiki bug.^[5] In other words, do not put a newline in alt text.

Alt text should avoid tricky typographical constructions that are likely to confuse screen readers. For example "top 1/2 of a 100 m² living room" is better reworded as "top half of a 100 square meter living room".

Alternative text describes the image, not its file or format. Thus, it shouldn't mention:

• the file name
• the file format
• the size of the file
• the dimensions of the file
• instructions on how to view a bigger version of the image
• the fact that it is a substitute for an image. For example, avoid phrases like "photograph of", "diagram illustrating", and "showing".

[edit] Flawed and better examples

Image	Flawed alt text	What's wrong with it	Better alt text
Milia	"Example of milia"	Readers typically do not know what milia looks like, and this text conveys no useful information to them.	"Closed eyelid with several tiny white skin bumps"
A three-year-old with autism points to fish in an aquarium, as part of an experiment on the effect of intensive shared-attention training on language development.	"Color photograph of side view of a young child pointing at a window. Behind the child a woman smiles broadly and points to the same window."	The phrase "Color photograph of side view of" is distracting and not that useful here. Technical details about how an image was made are best omitted from the alt text, unless the details are directly relevant to the gist of the image's appearance.	"A young child points at a window. Behind the child a woman smiles broadly and points to the same window."
SMS Helgoland	"The SMS 'Helgoland', carrying out maneuvers in the German Bight, August 1913"	A typical reader cannot tell from viewing the image that it is of the SMS Helgoland, or that it is carrying out maneuvers, or that it is in the German Bight, or that the image is dated August 1913. Tiny text at the image bottom does say the image was taken circa 1911–1917, so that information is fair game; but the other information belongs in the caption or in associated text, not in alt text.	"Large gray battleship underway, circa 1911–1917. Dark smoke streams back from its three funnels."
Preparations at the United States Capitol	"Inauguration preparations at the United States Capitol"	Alt text is a near-duplicate of the caption and conveys little information about appearance.	"U.S. Capitol at dusk, mostly darkened but with dome floodlit from within. Just below it is a lit area with several dark figures."
Demineralization and remineralization of dental enamel in the presence of acid and fluoride in saliva and plaque fluid	"Diagram of how fluoride helps prevent cavities"	A typical reader cannot immediately tell from the diagram's appearance that it is about preventing cavities. More important, the alt text fails to describe the image's prominent text items and their relationships, and thus fails to describe the most important aspect of the image.	"Diagram: Carbonated hydroxyapatite enamel crystal (in solid yellow hexagon), connected by an arrow labeled 'Demineralization: Acid in plaque' to partly dissolved crystal (in fuzzy pink hexagon), which in turn is connected by an arrow labeled 'Remineralization: Fluoride in plaque' to fluoroapatite-like coating on remineralized crystal (in solid light-blue hexagon)"
Demineralization and remineralization of dental enamel in the presence of acid and fluoride in saliva and plaque fluid	"Diagram: Carbonated hydroxyapatite enamel crystal (in solid yellow hexagon), connected by an arrow labeled 'Demineralization: Acid in plaque' to partly dissolved crystal (in fuzzy pink hexagon), which in turn is connected by an arrow labeled 'Remineralization: Fluoride in plaque' to fluoroapatite-like coating on remineralized crystal (in solid light-blue hexagon)"	Alt text should be brief. The diagram's decorative details are not important enough to be described in the alt text.	"Carbonated hydroxyapatite enamel crystal is demineralized by acid in plaque and becomes partly dissolved crystal. This in turn is remineralized by fluoride in plaque to become fluoroapatite-like coating on remineralized crystal."
USA	"U.S.A. flag"	This image is purely decorative, as it duplicates the "USA"; so it should not have alt text.	Omit the alt text. Instead, use "link=" so that a screen reader will skip the flag and just say "USA".

[edit] Appearance

Here is an example image with alt text, and how it might appear to various browsers.

Wikipedia code

[[Image:Antikythera philosopher.JPG|thumb|left|upright|alt=Bronze head of bearded man|The ''Philosopher'' from the [[Antikythera wreck]]]]

The phrase "Bronze head of bearded man" is the text that will be rendered in place of the image.

Result in a screen reader

A screen reader might say the following words:

"bronze head of bearded man link the Philosopher from the Antikythera wreck link"

Without the alt text, the same screen reader might say the following, which is less useful:

"Antikythera philosopher dot jay pee gee link the Philosopher from the Antikythera wreck link"

Result in your browser

The Philosopher from the Antikythera wreck

With images disabled

This shows what might be displayed in a web browser with images turned off. Many modern browsers allow users to turn off images (for example, if they are using a low-bandwidth connection). The contents of the alt text are often rendered in place of the image. Here, the phrase serves as a useful replacement for the image.

Caveat: Though this is not technically considered an appropriate usage for the alt text contents, many browsers nevertheless display it in this manner. If possible, choose alt text which makes sense in this format.

[edit] History

Until 2008, the alt text of an image was automatically the same as its caption, an approach with two drawbacks. First, this meant that the image caption was read twice by the screen reader to the listener, once for the alt text and once for the caption itself. Second, captions do not always describe their image, but rather describe its meaning for the reader.

A new system was introduced in October 2008.^[6] It allows Wikipedians to specify the image alt text independently of its caption. The caption is always the last parameter in the Image link, whereas the alt text is specified by an "alt=" parameter. In this new system, the alt text serves to describe the image to those who cannot see it, whereas the caption conveys essential information beyond what can be seen.

[edit] Need more help?

If you're still unsure about the best alternative text for an image, leave a note on this article's talk page, and someone will help you out.

[edit] References

[edit] Sources

• Caldwell B, Cooper M, Guarino Reid L et al. (eds.) (2008-12-11). "Web Content Accessibility Guidelines (WCAG) 2.0". W3C Web Accessibility Initiative. http://www.w3.org/TR/WCAG20/. Retrieved on 2009-07-06. 
• Caldwell B, Cooper M, Guarino Reid L et al. (eds.) (2008-12-11). "Techniques for WCAG 2.0". W3C Web Accessibility Initiative. http://www.w3.org/TR/WCAG20-TECHS/. Retrieved on 2009-07-06.