Wikipedia:Manual of Style/Accessibility/Alternative text for images

alt=Painting of Napoleon Bonaparte|The Emperor Napoleon in His Study at the Tuileries by Jacques-Louis David

With the alt parameter empty, the screenreader would read out the file name: "link graphic slash Jacques hyphen Louis underscore David underscore zero one seven jay pee gee."

Alternative text (alt text) is a textual alternative to images. The point of alt text is to allow the content and function of an image to be understood by text-only readers. Alt text can be specified in images with the "alt=" parameter:

File:Jacques-Louis David 017.jpg |alt=Painting of Napoleon Bonaparte| The Emperor Napoleon in His Study at the Tuileries by Jacques-Louis David

The words after "alt=" ("Painting of Napoleon Bonaparte") are displayed by browsers when images are switched off, read out loud by screen readers for those with visual impairment, and used by search engines to determine the content of the image. Absent or unhelpful alt text is a source of frustration for blind users of the Web.

Alt text should be brief. Where an image presents a lot of information, a short description in the alt parameter can accompany a longer description in the caption or body of the article, where necessary.

The alt parameter should not be left empty, because almost all images are links, and if the parameter is empty screen readers will read out the link filename, such as (for the Napoleon example) "link graphic slash Jacques hyphen Louis underscore David underscore zero one seven jay pee gee." An image that is purely decorative—for example in a template where the image is not a link—requires no alt text. Where the caption or nearby text are sufficiently descriptive or evocative, or where they make clear what the function of the image is, one option for the alt parameter is to write |alt=photograph or |alt=drawing.

Audience

The audience for alt text includes:

• readers with visual impairment of varying degrees who browse Wikipedia using a screen reader that translates text into speech or Braille, such as JAWS, NVDA or Orca;
• readers using browsers that do not support images (e.g., Lynx), or that are configured not to display them;
• search-engine bots.

Experiencing Wikipedia with a screen reader requires practice. An alternative is to install the Fangs add-on for Firefox, which displays the words spoken by a screen reader. An experienced screen-reader user may choose to skip portions of the text.

How to write alt text

Basics

Alt text should consist of plain text (no HTML or Wiki markup such as wikilinks) and be all on one line. The text must comply with Neutral point of view, Verifiability, No original research, and Biographies of living persons. Since it cannot contain inline citations it must not convey any contentious point, or material not obvious to any reader.

Alt text can almost always be a very short piece of text, such as "A basketball player" or "Tony Blair shakes hands with George W. Bush". If it needs to be longer, the important details should appear in the first few words, which helps the screen reader user to skip past the key points. Very long descriptions can be left for the body of the article. MediaWiki does not support HTML's longdesc attribute.

All readers will be aware this element is an image, so adding "photograph of" isn't necessary unless it's important to note whether it's a photograph or sculpture; the exception to this is when a single word such as "photograph" constitutes the alt text because the caption or nearby text are descriptive enough. Alt text is read out by screen readers just before the caption, so try to avoid having the same details in both.

When an image is chosen to show the subject's appearance, and where the appearance is directly relevant to the topic, the alt text should describe it, but be careful not to violate No original research and Biographies of living persons.

Importance of context

Unless it appears in an article on fashion, the alt text should not be "an elderly woman wearing a black hat."

Understanding the context of an image is vital. The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 2.0 recommends editors consider four questions:

• Why is this non-text content here?
• What information is it presenting?
• What purpose does it fulfil?
• If I could not use the non-text content, what words would I use to convey the same function and/or information?

For example, an image of Napoleon Bonaparte could be used in

• an article on great military leaders where it illustrates an example of such a leader—the alternative text should name subject;
• an article on Napoleon illustrating what he looked like—the alternative text should briefly describe his appearance if it matters to the article;
• an article on a painting of him—the alternative text should briefly describe the painting.

Images that contain words

If an image contains words important to the reader's understanding, the alt text should contain those words. If it contains non-Latin characters, consider providing a transliteration. Screen readers without Unicode support will read a character outside Latin-1 as a question mark, and even in the latest version of JAWS, the most popular screen reader, Unicode characters are very difficult to read.

Captions and nearby text

alt=photograph |Toothbrushes

The article and caption describe the subject, so adding "photograph" in the alt parameter is sufficient.

For details of the wiki markup that produces these elements, see Wikipedia:Extended image syntax#Alt text and caption.

Images are typically thumbnails with captions. The caption is visible to all readers, and can contain HTML markup, wikilinks and inline citations. An infobox often contains a plain image with the caption as a separate row. The caption may describe the image, identify its subject, or contain material that has nothing to do with the image.

Where the caption is sufficiently descriptive or evocative of the image, or where it makes clear what the function of the image is, one option is to write |alt=photograph, |alt=drawing, or |alt=refer to caption. Where nearby text in the article performs the same function, it can be |alt=refer to adjacent text. Editors should use common sense and keep the alt text as tight as possible when the caption suffices, to prevent screen readers reading out unnecessary words. Screen readers will read out the caption just after the alt text, so try to avoid having the same details in both.

Maps and diagrams

With maps, diagrams and charts, the colour, position, and size of elements are not important. Instead, concentrate on the information being presented. For example a chart may have short text "Sales in June, July and August", and a diagrammatic animation may have short text "Animation of a car engine in motion". The structural formula of a chemical compound can be unambiguously described using IUPAC nomenclature and the drug or chemistry infoboxes include this information.

Examples

Normal viewing	Screen reader	Rationale
[[File:Dannebrog.jpg |thumb |center |170px |alt=A red flag divided into four by a white cross slightly offset to the left. |The oldest [[national flag]] design still in use is [[Denmark]]'s 13th-century [[Flag of Denmark|''Dannebrog'']].]]
The oldest national flag design still in use is Denmark's 13th-century Dannebrog.	link graphic A red flag divided into four by a white cross slightly offset to the left. The oldest link national flag design still in use is link Denmark's 13th-century link Dannebrog	Article: Flag The purpose of the image is to show what Denmark's Dannebrog flag looks like. The photograph could be replaced by a flat graphic and serve the same purpose. Therefore the flagpole, the fluttering and the sky are not important.
[[File:Glass-half-full.jpeg |thumb |center |170px |alt=Clear water pours from a spout. |Fluoridation does not affect the appearance, taste or smell of [[drinking water]].]]
Fluoridation does not affect the appearance, taste or smell of drinking water.	link graphic Clear water pours from a spout. Fluoridation does not affect the appearance, taste or smell of link drinking water.	Article: Water fluoridation This is a stock photograph chosen to decorate a sound bite from the article regarding tap water. The image is a link so it needs alt text. Because the caption does not identify the image, a brief description is appropriate.
[[File:Blair Bush Whitehouse (2004-11-12).jpg |thumb |center |170px |alt=Tony Blair and George W. Bush shaking hands at a press conference. |Blair and Bush agree on a strategy for peace in the Middle East on 12 November 2004.]]
Blair and Bush agree on a strategy for peace in the Middle-East on 12 November 2004.	link graphic Tony Blair and George W. Bush shaking hands at a press conference. Blair and Bush agree on a strategy for peace in the Middle East on 12 November 2004.	The image shows them greeting each other with a handshake during a press conference. The alt text shouldn't say "Two men shaking hands," because that's not why the picture was chosen; it needs to identify the men. The alt text shouldn't say they were in the East Room of the White House, because that isn't clear from the photograph. That the men are dressed identically is conveyed by the photograph, but it isn't relevant to the article.

Alt text in templates, galleries

Templates

Many templates such as {{Infobox}} and {{Location map+}} have their own parameters for specifying alt text. If a template lacks such a parameter, consider asking that it be added.

Galleries

The <gallery> tag does not currently support alt text; see Wikimedia bug 18682. {{Image gallery}}, {{Multiple image}}, {{Double image}}, and {{Double image stack}} do support it. For an example on using the table syntax to create a gallery see Galleries.

Timelines

The <timeline> tag generates an image with no alt text. When using tables instead, add a table summary, which is read out by screen readers to give an overview of the contents.

Math formulae

The <math> tag is used to generate math formulae. These may be rendered as an image or using text, depending on their complexity and user preferences. For simple formulae, use the alt attribute to translate it to English. More complex formulae are hard to specify and the original markup may be the best option, which is the default if no alt attribute is specified.

Links and attribution

Writing "alt=|" will cause the MediaWiki software to render HTML with an empty alt parameter. When the image is a link, screen readers will read out the link filename (e.g., "slash green underscore tick") if the parameter is empty. Nearly all images in Wikipedia articles are links to the image description page, which contains a larger size version of the image, as well as. licensing and attribution information.

Wikipedia articles may contain images that do not link to an image page, such as images in templates. Such images should be configured so they are ignored by screen readers. This is achieved by adding |link=|alt= to the image wiki markup. Links should not be suppressed for any image that requires attribution.

Most of the images within Wikipedia articles do not serve an active function; they are not buttons or menu options. Where the image serves as a link to another article, name the article in the alternative text. Where following the link performs an operation (such as sort), indicate the operation. Don't say "click here" or "link to" as the reader will already know the image is a link and may not be clicking a mouse button on it.

When the alt parameter can be left blank

Normal viewing	Screen reader	Rationale
[[File:Commons-logo.svg|frameless |upright=0.23 |border |center |link=Commons:Special:Search |Search Wikimedia Commons]]
Search Wikimedia Commons	link graphic Search Wikimedia Commons	The purpose of the image, an icon, is to provide a link to the Commons search page. The appearance of the icon is not important, but its function is. By writing the alt text in the "caption" field of the image markup, it is both the alt text and the link title. The link title appears as a tooltip in some browsers.
<imagemap> File:Bryan-Sewall.jpg |170px |center |alt=1896 Democratic campaign poster circle 950 850 700 [[William Jennings Bryan|William J. Bryan]] circle 2950 850 700 [[Arthur Sewall]] default [http://projects.vassar.edu/1896/democrats.html 1896 Democrats Website] </imagemap>
	The base image has alt text "1896 Democratic campaign poster". The left circle has alt text "William J. Bryan". The right circle has alt text "Arthur Sewall". The blue (i) has alt text "About this image". All these are repeated as link title text, which provides a tooltip in some browsers, with the exception of the base image, which has link title "1896 Democrats Website".	First line specifies the base image's alt text, which in this case is identifying the picture. Each subsequent line specifies the alt text for a region link, which should be the purpose of the link.
[[File:Imbox notice.png |28x28px |alt= |link= ]] Don't run with scissors.
Don't run with scissors.	Don't run with scissors.	The icon is purely decorative. Since the image is in the public domain, no attribution is required and the link can be dropped, allowing us to specify blank alt text without causing the filename to be spoken by a screen reader. The combination of no link and no alt text hides it from screen readers completely.

External links

• Altviewer tool for checking the alt text of Wikipedia articles.
• Fangs screen reader emulator.