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

{{Redirect|WP:ALT|other sites that may be more useful if an article is unsuitable for Wikipedia|Wikipedia:Alternative outlets|alternative accounts|Wikipedia:Sock puppetry#Legitimate uses of alternative accounts|the guideline on mentioning an article's alternative names|MOS:ALTNAME}}

{{Supplement|interprets=Manual of Style accessibility for images guidelines |WP:MOSALT|MOS:ALT}}

{{nutshell|Alternative text allows the content and function of an image to be understood by text-only readers.}}

Alternative text (or alt 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 alt parameter in the MediaWiki markup. The following example produces the adjacent image:

File:Jacques-Louis David 017.jpg by Jacques-Louis David]]

File:Jacques-Louis David 017.jpg by Jacques-Louis David]]

The alt parameter text ("Painting of Napoleon Bonaparte") 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 "alt text" (in a code font) is used here to refer to the text supplied for the image alt 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.[http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G74 G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description], WCAG 2.0 technique.
WebAim writes: "[T]he alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. ... The term alternative text, as used in this article, refers to the text equivalent for an image, regardless of where that text resides. It does not refer solely to the alt attribute of the image tag. See WebAIM. [https://webaim.org/techniques/alttext/#basics Alternative Text Basics], accessed 30 September 2020.

For images that link to their image description page (which is nearly all images on Wikipedia), the alt text cannot be blank nor should the alt 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 alt text is available.W3C. [http://www.w3.org/TR/WCAG20-TECHS/F89.html F89: Failure (...) due to using null alt on an image where the image is the only content in a link], Techniques for WCAG 2.0, accessed November 5, 2014 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 alt parameter.WebAIM says: "An image that is the only thing inside a link must never have a missing or null alt attribute. This is because the screen reader must read SOMETHING to identify the link." See WebAIM, [https://webaim.org/techniques/alttext/#context Context is Everything], accessed 30 September 2020.

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 alt 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 {{para|alt|photograph}} , {{para|alt|painting}}, or {{para|alt|sculpture}}. Another solution, if a caption doesn't already describe or identify the image, is for the alt 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. due to limited data allowance);
Search-engine bots.

Experiencing Wikipedia with a screen reader requires practice. An experienced screen-reader user may choose to skip portions of the text.

How to write alternative 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 alt text must be plain text (no HTML or wiki markup such as wikilinks) without line breaks. 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 alt text is intended to be read out by screen readers just before the caption, so avoid having the same details in both.

=Importance of context=

File:Queen Elisabeth II.JPG 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 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 have widely varying support for characters outside Latin-1.

=Captions and nearby text=

{{For|details of the wiki markup that produces these elements|Wikipedia:Extended image syntax#Alt text and caption|selfref=yes}}

File:Toothbrush x3 20050716 002.jpg

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

When the image type is specified in such a way that a caption is not visible without hovering over the image, which occurs in such places as the Main Page, the caption text is automatically used as the alt text, which almost always suffices (see the extended image syntax link above).

=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 exceeded those in July, and August's were higher still", 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.

= Decorative images=

An image that provides no essential information is a purely 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 or in a caption. 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: {{para|link}}{{para|alt}}. 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, blank {{para|alt}} and {{para|link}} attributes should not be used. It is Wikipedia's policy to link those images for attribution, and 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 brief alt attribute (such as {{para|alt|photograph}}, {{para|alt|painting}}, {{para|alt|sculpture}}, or {{para|alt|icon}}) 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 {{para|alt|next page}} not {{para|alt|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 {{tl|Infobox}} and {{tl|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 tag supports alt text since MediaWiki 1.18.Wikimedia bug 18682 {{tl|Gallery}} and {{tl|Multiple image}} also support it. For an example of using the table syntax to create a gallery see Galleries.

;Timelines: The 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 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 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 alt parameter is supplied.

Links and attribution

Writing "{{para|alt|}}" will cause the MediaWiki software to render HTML with an empty alt attribute in the img tag. When the image is a link, screen readers will read out the link filename (e.g., "slash green underscore tick") if the HTML alt 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 {{para|link|}}{{para|alt|}} to the image wiki markup. Removing the link is acceptable only 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.Petrie, Helen; Harrison, Chandra; and Dev, Sundeep. [http://www-users.cs.york.ac.uk/~petrie/HCII05_alt_text_Paper.pdf Describing images on the Web: a survey of current practice and prospects for the future], Centre for Human Computer Interaction Design, City University London, accessed June 8, 2010.

Examples

class="wikitable" \|+ Examples of alternative text
scope="col" \| Wikicode ! scope="col" \| Normal viewing ! scope="col" \| Screen reader ! scope="col" \| Rationale
File:Dannebrog.jpg design still in use is Denmark's 13th-century Dannebrog.]] \| File:Dannebrog.jpg 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.]] \| File:Glass-half-full.jpeg.]] \| 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 \| File:Blair Bush Whitehouse (2004-11-12).jpg \| 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.

class="wikitable"

Examples of alternative text

scope="col" | Wikicode

! scope="col" | Normal viewing

! scope="col" | Screen reader

! scope="col" | Rationale

File:Dannebrog.jpg design still in use is Denmark's 13th-century Dannebrog.]]

| File:Dannebrog.jpg 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.]]

| File:Glass-half-full.jpeg.]]

| 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

| File:Blair Bush Whitehouse (2004-11-12).jpg

| 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.

class="wikitable" \|+ Unusual examples of alternative text
scope="col" \| Wikitext ! scope="col" \| Normal viewing ! scope="col" \| Screen reader ! scope="col" \| Rationale
File:Commons-logo.svg \| File:Commons-logo.svg \| 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 alternative 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.
File:Bryan-Sewall.jpg\|thumb\|upright=0.75\|center\|alt=1896 Democratic campaign poster circle 950 850 700 William J. Bryan circle 2950 850 700 Arthur Sewall default [http://projects.vassar.edu/1896/democrats.html 1896 Democrats Website] \| File:Bryan-Sewall.jpg\|thumb\|upright=0.75\|center\|alt=1896 Democratic campaign poster circle 950 850 700 William J. Bryan circle 2950 850 700 Arthur Sewall default [http://projects.vassar.edu/1896/democrats.html 1896 Democrats Website] \| 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.W3C. [https://www.w3.org/TR/2008/WD-WCAG20-TECHS-20081103/H24 H24: Providing text alternatives for the area elements of image maps], WCAG 2.0 technique.
Mercury, Venus, Earth, Mars. File:Grey line.png Jupiter, Saturn, Uranus, Neptune. \| Mercury, Venus, Earth, Mars. File:Grey line.png Jupiter, Saturn, Uranus, Neptune. \| Mercury, Venus, Earth, Mars. Jupiter, Saturn, Uranus, Neptune. \| The image provides visual structure but no essential information. Since the image is in the public domain, no attribution is required and the link can be dropped, allowing us to specify a blank `alt` attribute, so the filename is not spoken by a screen reader. The combination of no link and a blank `alt` attribute instructs screen readers to skip the image completely.
File:Ambox warning pn.svg Warning: Don't run with scissors. \| File:Ambox warning pn.svg Warning: Don't run with scissors. \| Warning: Don't run with scissors. \| The image strictly repeats the information conveyed by the adjacent word "Warning". Since "Warning" is sufficient alternative text, a blank `alt` attribute is appropriate.

class="wikitable"

Unusual examples of alternative text

scope="col" | Wikitext

! scope="col" | Normal viewing

! scope="col" | Screen reader

! scope="col" | Rationale

File:Commons-logo.svg

| File:Commons-logo.svg

| 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 alternative 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.

File:Bryan-Sewall.jpg|thumb|upright=0.75|center|alt=1896 Democratic campaign poster

circle 950 850 700 William J. Bryan

circle 2950 850 700 Arthur Sewall

default [http://projects.vassar.edu/1896/democrats.html 1896 Democrats Website]

File:Bryan-Sewall.jpg|thumb|upright=0.75|center|alt=1896 Democratic campaign poster

circle 950 850 700 William J. Bryan

circle 2950 850 700 Arthur Sewall

default [http://projects.vassar.edu/1896/democrats.html 1896 Democrats Website]

| 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.W3C. [https://www.w3.org/TR/2008/WD-WCAG20-TECHS-20081103/H24 H24: Providing text alternatives for the area elements of image maps], WCAG 2.0 technique.

Mercury, Venus, Earth, Mars.
File:Grey line.png
Jupiter, Saturn, Uranus, Neptune.

| Mercury, Venus, Earth, Mars.
File:Grey line.png
Jupiter, Saturn, Uranus, Neptune.

| Mercury, Venus, Earth, Mars. Jupiter, Saturn, Uranus, Neptune.

| The image provides visual structure but no essential information. Since the image is in the public domain, no attribution is required and the link can be dropped, allowing us to specify a blank alt attribute, so the filename is not spoken by a screen reader. The combination of no link and a blank alt attribute instructs screen readers to skip the image completely.

File:Ambox warning pn.svg Warning: Don't run with scissors.

| File:Ambox warning pn.svg Warning: Don't run with scissors.

| Warning: Don't run with scissors.

| The image strictly repeats the information conveyed by the adjacent word "Warning". Since "Warning" is sufficient alternative text, a blank alt attribute is appropriate.

Notes

{{reflist|group=Note|refs=

{{#tag:ref|WebAIM says "An image that is the only thing inside a link must never have a missing or null alt attribute. This is because the screen reader must read SOMETHING to identify the link." The screen reader emulator Fangs confirms this.|group="Note"|name="LinkBlankAlt"}}

}}

References

{{reflist|colwidth=30em|refs=

{{vcite web| url=http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html |title=Understanding Success Criterion 1.1.1; Understanding WCAG 2.0 |publisher=W3C |date=11 December 2008 |accessdate=4 April 2010}}

{{vcite web| url=https://webaim.org/techniques/alttext/ |title=Alternative Text |home=2020 WebAIM |publisher=Center for Persons with Disabilities, Utah State University|accessdate=30 September 2020}}

{{vcite web| url=http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G94 |title=G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content |publisher=W3C |date=11 December 2008 |accessdate=4 April 2010}}

{{vcite journal |author=Lazar J, Allen A, Kleinman J, Malarkey C |year=2007 |title=What frustrates screen reader users on the web: a study of 100 blind users |journal=Int J Hum Comput Interact |volume=22 |issue=3 |pages=247–69 |doi=10.1080/10447310709336964 |url=http://triton.towson.edu/~jlazar/IJHCI_blind_user_frustration.pdf |format=PDF}}

}}

External links

[https://html.spec.whatwg.org/multipage/images.html#alt Requirements for providing text to act as an alternative for images] – in the HTML 5 specification
[https://www.stylemanual.gov.au/content-types/images/alt-text-captions-and-titles-images Alt text, captions and titles for images], from the Australian Government Style Manual
[https://www.bbc.co.uk/gel/how-to-write-text-descriptions-alt-text How to write text descriptions (alt text) in BBC News articles]
[http://69.142.160.183/~dispenser/cgi-bin/altviewer.py?page= Altviewer tool]{{broken link}} for checking the alt text on an article

Alternative text for images

Category:Wikipedia image help

Category:Wikipedia essays and information pages about the Manual of Style