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.

[edit] What to specify

Alternative text exists as a substitute for the image, for those who cannot see it. It should not interpret the image, or suggest its meaning, since that role belongs to the caption instead. Original research should be scrupulously avoided when writing alt text. In general, a sighted reader should be able to confirm by eye that the alt text describes the image. On the other hand, the alt text need not summarize irrelevant details of the image.

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

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:
  • Good: "The straight chain form consists of four C H O H groups..."
  • Bad: "This image shows that the straight chain form consists of four C H O H groups..."

[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.	"Side view of large gray battleship underway, circa 1911–1917. Dark smoke streams back from its three funnels."
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.	"Diagram: 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] Example

[edit] Wikipedia code

[[Image:Antikythera philosopher.JPG|thumb|left|upright|alt=Bronze head of bearded man|The ''Philosopher'' ({{circa|250–200 BC}}) from the [[Antikythera wreck]] illustrates the style used by Hecataeus in his bronze of Philitas.]]

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

[edit] Result in your browser

The Philosopher (250–200 BCc. 250–200 BC) from the Antikythera wreck illustrates the style used by Hecataeus in his bronze of Philitas.

The above might be displayed in a graphical web browser that is capable of showing images. In this case, the image serves to illustrate the description of a (different) bronze statue.

[edit] What people see with images turned off

This example 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.^[5] 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.