Idea Wiki:ALT

Alternative text is text associated with an image that serves the same purpose and conveys the same essential information as the image. In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost. Absent or unhelpful alternative text can be a source of frustration for visually impaired users.

On Wikipedia, alternative text is typically supplied through a combination of the image caption and the text supplied for the image  parameter in the MediaWiki markup. The following example produces the adjacent image: ""

The  parameter text ("Painting of Napoleon Bonaparte in His Study at the Tuileries") is not normally visible to readers; however, it may be displayed by web browsers when images are switched off, or read out loud by screen readers for those with visual impairment, and can be used by search engines to determine the content of the image. In keeping with other Internet guidelines, the term " text" (in a   font) is used here to refer to the text supplied for the image   parameter and which generates text for the HTML alt attribute; the term "alternative text" refers to the text equivalent for an image, regardless of where that text resides.

For images that link to their image description page (which is nearly all images on Wikipedia), the  text cannot be blank nor should the   parameter be absent. This is because a screen reader, in order to describe the purpose of the link, will default to reading out the image filename when no  text is available. This is usually not helpful. In the above Napoleon example, the screen reader would have read out "link graphic slash Jacques hyphen Louis underscore David underscore zero one seven" had we not supplied the  parameter.

An image that is purely decorative (provides no information and serves only an aesthetic purpose) requires no alternative text. Often the caption fully meets the requirements for alternative text. However, the only situation where blank  text is acceptable is where such images are unlinked, which is rarely possible. One solution is to provide something at least minimally useful such as photograph, painting, or sculpture. Another solution, if the caption doesn't already describe or identify the image, is for the  text to do so as briefly as possible.

Audience
The audience for alternative 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 (e.g. Wikipedia Zero);
 * 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.

Basics
Alternative text should be short, 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, allowing the user of a screen reader to skip forward once the key points are understood. 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 usually necessary.

The  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. The  text is read out by screen readers just before the caption, so try to avoid having the same details in both.

Importance of context


Understanding the context of an image is vital. The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 2.0 recommend 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 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 the 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 alternative 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



 * For details of the wiki markup that produces these elements, see Extended image syntax.

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. A good caption should succinctly identify the subject of the image and establish the image's relevance to the article, without detailing the obvious.

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 refer to caption. Where nearby text in the article performs the same function, it can be refer to adjacent text.

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 alternative text "Sales in June, July and August", and a diagrammatic animation may have alternative 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.

Blank alt attributes
An image that provides no essential information is a decorative image. A decorative image may provide visual structure or aesthetic flourish, but can cause confusion outside that visual context. A non-blank alt attribute on a decorative image results in audible clutter for screen reader users, and irrelevant text inserted into search engine results.

Similar problems exist for an image that strictly repeats the information found in nearby text. The nearby text is sufficient as the image's alternative text. A non-blank alt attribute results in repetitive text for screen readers and search engines.

In both cases, a blank alt attribute is ideal.

For public domain, CC0, or similarly licensed images, unlink the image and use a blank alt attribute: altlink. The combination of no link and a blank alt attribute causes screen readers to skip the image, and causes search engines to skip the image in search result text snippets.

For CC-BY-SA, GFDL, or similarly licensed images, it is Wikipedia's policy to link those images for attribution. Linked images must have a non-blank alt attribute to prevent empty links, which result in confusing announcements in screen readers. When a blank alt attribute is desired, consider replacing CC-BY-SA images with public domain equivalents. Otherwise, use a short alt attribute to minimize the confusing text.

Icons that convey information not found in the text should have alt attributes that describe their function, not their appearance. For example, an arrow icon used to navigate to the following page should have an alt attribute of next page not arrow pointing right. If the arrow were accompanied by a descriptive text link with same function, a blank alt attribute would be more appropriate.

Alt text in templates and galleries

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


 * Galleries: The  tag supports   text since MediaWiki 1.18. Gallery and Multiple image also support it. For an example on using the table syntax to create a gallery see Galleries.


 * Timelines: The  tag generates an image with no   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  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   parameter 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   parameter is supplied.

Links and attribution
Writing "alt" will cause the MediaWiki software to render HTML with an empty  attribute in the   tag. When the image is a link, screen readers will read out the link filename (e.g., "slash green underscore tick") if the HTML  attribute is empty or missing. 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 sometimes contain images that do not link to an image page, for example an Information icon. Such images should be configured so they are ignored by screen readers. This is achieved by adding linkalt to the image wiki markup. Removing the link is acceptable for images in the public domain or the equivalent CC0. Links should not be suppressed for any image that requires attribution.

Most images in 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. Do not 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.