Misplaced Pages:Manual of Style/Accessibility/Alternative text for images: Difference between revisions

< Misplaced Pages:Manual of Style | Accessibility Browse history interactively ← Previous editContent deleted Content addedVisual WikitextInline

Revision as of 19:11, 12 August 2008 editCochituate (talk \| contribs)156 edits Replaced the text, confused by the result; someone needs to check this link and fix it.← Previous edit		Latest revision as of 22:42, 17 October 2024 edit undoThe wub (talk \| contribs)Administrators92,661 edits →External links: + BBC News guidelines which are quite helpful and cover a variety of image types
(855 intermediate revisions by more than 100 users not shown)
Line 1:		Line 1:
	{{~~selfref~~\|"WP:ALT~~" redirects~~ ~~here.~~ ~~You~~ may ~~also~~ be ~~looking~~ for ], ] or ].}}		{{Redirect\|WP:ALT\|other sites that may be more useful if an article is unsuitable for Misplaced Pages\|Misplaced Pages:Alternative outlets\|alternative accounts\|Misplaced Pages:Sock puppetry#Legitimate uses of alternative accounts\|the guideline on mentioning an article's alternative names\|MOS:ALTNAME}}
			{{Supplement\|interprets=] guidelines \|WP:MOSALT\|MOS:ALT}}
	{{style-guideline\|WP:ALT}}
			{{nutshell\|Alternative text allows the content and function of an image to be understood by text-only readers.}}
	Every time a Misplaced Pages article uses an image, the '''alternative text''' for that image should be specified. Alternative text is used as a ''replacement'' for an image, whenever the image cannot be seen. This can happen, for example, when someone:
			{{Misplaced Pages:WikiProject Accessibility/Navigation menu\|articles}}

			'''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.<ref name=G94/> 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 ] due to a ], the alternative text ensures that no information or functionality is lost.<ref name=G94/> Absent or unhelpful alternative text can be a source of frustration for visually impaired users.<ref name=Lazar2007/>
	* uses a speech browser (''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 by an erroneous wire
	* copies an extract from a Web page into a word processor.

			On Misplaced Pages, alternative text is typically supplied through a combination of the image ] and the text supplied for the image <code>alt</code> parameter in the ]. The following example produces the adjacent image:
	Alternative text is also used in other circumstances: for example, ]'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 Misplaced Pages's ].
			]'' by ]]]
			<blockquote><syntaxhighlight lang="wikitext">]'' by ]]]</syntaxhighlight></blockquote>

			The <code>alt</code> 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 ]s for those with visual impairment, and can be used by search engines to determine the content of the image.<ref name=WebAIM /> In keeping with other Internet guidelines, the term "<code>alt</code> text" (in a <code>code</code> font) is used here to refer to the text supplied for the image <code>alt</code> parameter and which generates text for the ]; the term "alternative text" refers to the text equivalent for an image, regardless of where that text resides.<ref name=nearbytext>, WCAG 2.0 technique.<br/>WebAim writes: "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. , accessed 30 September 2020.</ref>
	You can use <code><nowiki>]</nowiki></code> to specify alternative text. See ] for other possible frame, link and other options available with images and Misplaced Pages.

			For images that link to their image description page (which is nearly all images on Misplaced Pages), the <code>alt</code> text cannot be blank nor should the <code>alt</code> 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 <code>alt</code> text is available.<ref>W3C. , Techniques for WCAG 2.0, accessed November 5, 2014</ref> 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 <code>alt</code> parameter.<ref>WebAIM says: "An image that is the only thing inside a link must never have a missing or null <code>alt</code> attribute. This is because the screen reader must read SOMETHING to identify the link." See WebAIM, , accessed 30 September 2020.</ref>
	It can be difficult choosing appropriate alternative text, though. It has to sound good in a speech browser; it should make sense in a graphical browser with images turned off; it should fit with the surrounding text when viewed with a text-only browser—trying to accommodate all of these can be quite daunting! This article should make the whole process a little easier.

			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 <code>alt</code> 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 <code>alt</code> text to do so as briefly as possible.
	==Conflict between caption and alt text==
	Unfortunately, the image syntax has no way of specifying alt text that is different from the caption. Therefore, if the image has a caption, please follow the advice in ] to choose an appropriate caption, and don't worry about the alt text (which will automatically be made the same as the caption). If the image does not have a caption, then follow the advice on this page to choose the most appropriate alt text.

			==Audience==
	==Imagine you're writing for an audio cassette==
	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, and they never will, 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.

	~~==Choosing~~ ~~good~~ alternative text==		'''The audience for alternative text includes''':
			*Readers with visual impairment of varying degrees who browse Misplaced Pages using a ] that translates text into speech or ], such as ], ] or ]<ref name=WebAIM />
	Alternative text should serve as a replacement for the information or meaning conveyed by the image. It isn't there to describe what the image looks like, or to tell us information about the image format. In choosing a phrase to use for the alternative text, think about what the image ''expresses''.
			*Readers using browsers that do not support images (e.g., ]), or that are configured not to display them (e.g. due to limited data allowance);<ref name=WebAIM />
			*Search-engine bots.<ref name=WebAIM />

			Experiencing Misplaced Pages with a screen reader requires practice. An experienced screen-reader user may choose to skip portions of the text.
	In encyclopedia articles, images are often used to convey information in an intuitive way. Many times, this information is ''best'' expressed as an image, rather than as text, but as noted above, there are situations where the image itself is not available. In these situations, the alternative text is usually used in place of the image.

			==How to write alternative text==
	The alternative text should communicate the same information that the image communicates. If the image is there to convey information about color, then mention the color in the alternative text. If the image is there to convey something about shape or size, then mention that in the alternative text. Don't try to describe every detail of the image, but do endeavour to summarize the image's intent in a way that will make sense to someone who cannot see the image.

			===Basics===
	==The best alternative text is often nothing==
	In Misplaced Pages, images tend to be fairly important. Often, however, an image's meaning won't be important enough to merit inclusion in a text-only rendering of the page. This is especially true when the image is merely a visual equivalent to something already in the page's text. So empty alternative text is often the best choice.

			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.<ref name=G94/> ] does not support HTML's ]. All readers will be aware this element is an image, so adding "photograph of" isn't usually necessary.
	In Misplaced Pages, providing completely empty alternative text requires the use of a <code><nowiki></code> element, like this:
	:<code><nowiki>]</nowiki></code>.

			The <code>alt</code> text must be plain text (no HTML or wiki markup such as wikilinks) without line breaks. The text must comply with ], ], ], and ]. Since it cannot contain ], it must not convey any contentious point, or material not obvious to any reader. The <code>alt</code> text is intended to be read out by screen readers just before the caption, so avoid having the same details in both.
	==For a vital image, express its meaning==
	If an image ''is'' an important or interesting part of what you are trying to say, provide alternative text which, if possible, makes the page as understandable and useful for people who can't see the image as for people who can.

			===Importance of context===
	Use appropriate punctuation to make your alternative text sound sensible. With the current version of the Misplaced Pages software, alternative text for images should form one or more complete sentences. Don't forget to start them with a capital letter, finish them with a full stop, and include a verb.

			] should not be "an elderly woman wearing a black hat"]]
	===Example===

			Understanding the context of an image is vital. The ] (W3C) ] (WCAG) 2.0 recommend editors consider four questions:<ref name=UnderstandingSC111/>
	====Misplaced Pages code====
	<blockquote style="background-color: white; color: black; border:1px solid black; padding: 1em;">
	<code>1... e5<br><br><nowiki>]</nowiki><br><br>This move by Black is good, for the same reasons as White's was.<br>
	Note that the two e-file pawns are not threatening to capture each other, because pawns capture diagonally.<br>
	</code>
	</blockquote>

			* Why is this non-text content here?
	Note in particular the phrase "Black's pawn is brought out immediately in front of White's pawn." This is the text that will be rendered in place of the image.
			* 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 ] could be used in
	====Result in your browser====
	<blockquote style="background-color: white; color: black; border:1px solid black; padding: 1em;">
	1... e5
	<p>
	]
	<p>
	This move for Black is good, for the same reasons as White's was.
	Note that the two e-file pawns are not threatening to capture each other, because pawns capture diagonally.</blockquote>

			* an article on great military leaders where it illustrates an example of such a leader—the alternative text should name the subject;
	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 chess move.
			* an ] illustrating what he looked like—the alternative text should briefly describe his appearance if it matters to the article;
			* an ]—the alternative text should briefly describe the painting.

			===Images that contain words===
	====What people see with images turned off====
	<blockquote style="background-color: white; color: black; border:1px solid black; padding: 1em;">
	1... e5

			If an image contains words important to the reader's understanding, the alternative text should contain those words.<ref name="G94" /> If it contains non-Latin characters, consider providing a ]. Screen readers without ] support have widely varying support for characters outside ].
	<div style="width:200px; border: 1px inset lightgrey; padding: 0.5em; margin: 1em;">].</div>

			===Captions and nearby text===
	This move for Black is good, for the same reasons as White's was.
	Note that the two e-file pawns are not threatening to capture each other, because pawns capture diagonally.</blockquote>

			]
	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 <code>alt</code> text are often rendered in place of the image. Here, the phrase serves as a useful replacement for the image.

			:''For details of the wiki markup that produces these elements, see ].''
	''Caveat: Though this is not technically considered an appropriate usage for the'' <code>alt</code> ''text contents, many browsers nevertheless display it in this manner. If possible, choose'' <code>alt</code> ''text which makes sense in this format.''
			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}}'''.<ref name=nearbytext/>
	====What people hear or see in a text-only browser====
	<blockquote style="background-color: white; color: black; border:1px solid black; padding: 1em;">
	"1... e5. ]. This move for Black is good, for the same reasons as White's was. Note that the two e-file pawns are not threatening to capture each other, because pawns capture diagonally."</blockquote>

			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).
	The link in the above would typically be displayed in a different colour by a text browser such as the ].

			===Maps and diagrams===
	The above text may be spoken by a screen reader or aural browser. Again, the <code>alt</code> contents provide a useful replacement for the image, and conveys similar information.Images

			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 ] of a ] can be unambiguously described using ] and the ] or ] infoboxes include this information.
	==Don't talk about the image, talk about the thing==
	A common mistake in writing alternative text is to describe the image itself. Your listeners don't care that you put an image in the visual version of the page. Instead, they want to hear what you were trying to convey by putting it there.

			===<span id="Blank alt attributes"></span><span id="Purely decorative images"></span><span id="BLANKALT"></span><span id="PDI"></span> Decorative images===
	===Don't do this===
			{{shortcut\|MOS:PDI\|MOS:BLANKALT}}

			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.
	====Misplaced Pages code====
	<blockquote style="background-color: white; color: black; border:1px solid black; padding: 1em;">
	<code><nowiki>]</nowiki><br><br>A lettuce plant has a short stem initially, but when it blooms, the stem lengthens and branches.</code>
	</blockquote>

			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.
	====What people hear====
	<blockquote style="background-color: white; color: black; border:1px solid black; padding: 1em;">
	"] A lettuce plant has a short stem initially, but when it blooms, the stem lengthens and branches."
	</blockquote>

			In both cases, a blank alt attribute is ideal.
	===Do this instead===

			* 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.
	====Misplaced Pages code====
			* For CC BY-SA, GFDL, or similarly licensed images, blank {{para\|alt}} and {{para\|link}} attributes should ''not'' be used. It is Misplaced Pages'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.
	<blockquote style="background-color: white; color: black; border:1px solid black; padding: 1em;">
	<code><nowiki>]</nowiki><br><br>A lettuce plant has a short stem initially, but when it blooms, the stem lengthens and branches.</code>
	</blockquote>

			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.<ref name=WebAIM />
	====What people hear====
	<blockquote style="background-color: white; color: black; border:1px solid black; padding: 1em;">
	"] A lettuce plant has a short stem initially, but when it blooms, the stem lengthens and branches."
	</blockquote>

			==Alt text in templates and galleries==
	==Don't talk about the file, talk about the image's subject==
	When writing alternative text, assume that your readers don't have any access to the image, and never will. That will help you avoid frustrating people who really can't see it.

			{{anchor\|Templates}}
	This means you shouldn't mention any of the following in alternative text:
			;Templates: Many ] such as {{tl\|Infobox}} and {{tl\|Location map+}} have their own parameters for specifying <code>alt</code> text. If a template lacks such a parameter, consider asking that it be added.
	* the filename
			{{anchor\|Galleries}}
	* the size of the file
			;Galleries: The ] supports <code>alt</code> text since MediaWiki 1.18.<ref>]</ref> {{tl\|Gallery}} and {{tl\|Multiple image}} also support it. For an example of using the ] to create a gallery see '']''.
	* the dimensions of the file
			{{anchor\|Timelines}}
	* the filetype
			;Timelines: The ] generates an image with no <code>alt</code> text. When using tables instead, add a ], which is read out by screen readers to give an overview of the contents.
	* instructions on how to view a bigger version of the image (which will be similarly inaccessible).
			{{anchor\|Math formulae}}
			;Math formulae: The ] is used to generate math formulae. These may be rendered as an image or using text, depending on their complexity and ]. For simple formulae, use the <code>alt</code> 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 <code>alt</code> parameter is supplied.

			==Links and attribution==
	''Note: If you do not provide any alternative text, the Misplaced Pages software currently defaults to the image's filename. To work around this problem, always supply alternative text yourself.''

			Writing "{{para\|alt\|}}" will cause the MediaWiki software to render HTML with an empty <code>alt</code> attribute in the <code>img</code> tag. When the image is a link, screen readers will read out the link filename (e.g., "slash green underscore tick") if the HTML <code>alt</code> attribute is empty or missing. Nearly all images in Misplaced Pages articles are links to the image description page, which contains a larger size version of the image, as well as licensing and attribution information.<ref name=LinkBlankAlt group=Note/>
	==Same image, different articles, different alternative text==
	The most appropriate alternative text for an image depends on its context:
	* whether it is vital to the meaning of that particular page
	* where it is inserted, relative to the rest of the text
	* whether there are other images on the page which better demonstrate particular details.
	So the same image may have different alternative text in different articles images.

			Misplaced Pages 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 ] or the equivalent ]. Links should not be suppressed for any image that requires attribution.
	==Need more help?==
	If you're still unsure about the best alternative text for an image, leave a note on ], and someone will help you out.

			Most images in Misplaced Pages 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.<ref name=Petrie2005>Petrie, Helen; Harrison, Chandra; and Dev, Sundeep. , Centre for Human Computer Interaction Design, City University London, accessed June 8, 2010.</ref>
	==See also==
	* ]
	* ]

	==~~External links~~==		==Examples==
	*
	<!--

			{\| class="wikitable"
	*
			\|+ <div style="height: 36px">Examples of alternative text</div>
			\|-
			! scope="col" \| Wikicode
			! scope="col" \| Normal viewing
			! scope="col" \| Screen reader
			! scope="col" \| Rationale
			\|-
			\| <syntaxhighlight lang="wikitext">] design still in use is ]'s 13th-century '']''.]]</syntaxhighlight>
			\| ] design still in use is ] 13th-century '']''.]]
			\| ''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: ]<br/>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.
			\|-
			\| <syntaxhighlight lang="wikitext">].]]</syntaxhighlight>
			\| ].]]
			\| ''link'' ''graphic'' Clear water pours from a spout. Fluoridation does not affect the appearance, taste or smell of ''link'' drinking water.
			\| Article: ]<br/>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 <code>alt</code> text. Because the caption does not identify the image, a brief description is appropriate.
			\|-
			\| <syntaxhighlight lang="wikitext">]</syntaxhighlight>
			\| ]
			\| ''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.<p> The <code>alt</code> text shouldn't say "Two men shaking hands", because that's not why the picture was chosen; it needs to identify the men. The <code>alt</code> 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.</p>
			\|}
			{\| class="wikitable"
			\|+ <div style="height: 36px">Unusual examples of alternative text</div>
			\|-
			! scope="col" \| Wikitext
			! scope="col" \| Normal viewing
			! scope="col" \| Screen reader
			! scope="col" \| Rationale
			\|-
			\| <syntaxhighlight lang="wikitext">]</syntaxhighlight>
			\| ]
			\| ''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 <code>alt</code> text and the link title. The link title appears as a tooltip in some browsers.
			\|-
			\|
			<syntaxhighlight lang="tid">
			<imagemap>
			File:Bryan-Sewall.jpg\|thumb\|upright=0.75\|center\|alt=1896 Democratic campaign poster
			circle 950 850 700 ]
			circle 2950 850 700 ]
			default
			</imagemap>
			</syntaxhighlight>
			\|<imagemap>
			File:Bryan-Sewall.jpg\|thumb\|upright=0.75\|center\|alt=1896 Democratic campaign poster
			circle 950 850 700 ]
			circle 2950 850 700 ]
			default
			</imagemap>
			\| The base image has alt text "1896 Democratic campaign poster". The left circle has alt text "William J. Bryan". The right circle has <code>alt</code> text "Arthur Sewall". The blue '''(''i'')''' has <code>alt</code> 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 <code>alt</code> text, which in this case is identifying the picture. Each subsequent line specifies the <code>alt</code> text for a region link, which should be the purpose of the link.<ref>W3C. , WCAG 2.0 technique.</ref>
			\|-
			\| <syntaxhighlight lang="wikitext">Mercury, Venus, Earth, Mars.<br />]<br />Jupiter, Saturn, Uranus, Neptune.</syntaxhighlight>
			\| Mercury, Venus, Earth, Mars.<br />]<br />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 <code>alt</code> attribute, so the filename is not spoken by a screen reader. The combination of no link and a blank <code>alt</code> attribute instructs screen readers to skip the image completely.
			\|-
			\| <syntaxhighlight lang="wikitext">] <strong>Warning:</strong> Don't run with scissors.</syntaxhighlight>
			\| ] <strong>Warning:</strong> 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 <code>alt</code> attribute is appropriate.
			\|}

			==Notes==
	After Alan's sad death, his pages were taken down. Permission has been given to someone who is currently recreating them.

			{{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 <code>alt</code> attribute. This is because the screen reader must read SOMETHING to identify the link."<ref name=WebAIM /> The screen reader emulator Fangs confirms this.\|group="Note"\|name="LinkBlankAlt"}}
	*
			}}

			==References==
	*

			{{reflist\|colwidth=30em\|refs=
	*
			<!-- <ref name=WCAG20>{{vcite web\| url=http://www.w3.org/TR/2008/REC-WCAG20-20081211/#text-equiv-all \|title=Web Content Accessibility Guildelines (WCAG) 2.0 \|publisher=W3C \|date=11 December 2008 \|accessdate=4 April 2010}}</ref> -->

			<ref name=UnderstandingSC111>{{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}}</ref>
	]

			<ref name=WebAIM>{{vcite web\| url=https://webaim.org/techniques/alttext/ \|title=Alternative Text \|home=2020 WebAIM \|publisher=Center for Persons with Disabilities, ]\|accessdate=30 September 2020}}</ref>

			<ref name=G94>{{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}}</ref>

			<ref name=Lazar2007>{{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}}</ref>
			}}

			==External links==
			* – in the HTML 5 specification
			* , from the Australian Government Style Manual
			*
			* {{broken link}} for checking the alt text on an article

			]
	]
			]
			]

Latest revision as of 22:42, 17 October 2024

"WP:ALT" redirects here. For other sites that may be more useful if an article is unsuitable for Misplaced Pages, see Misplaced Pages:Alternative outlets. For alternative accounts, see Misplaced Pages:Sock puppetry § Legitimate uses of alternative accounts. For the guideline on mentioning an article's alternative names, see MOS:ALTNAME.

This is an explanatory essay about the Manual of Style accessibility for images guidelines.
This page provides additional information about concepts in the page(s) it supplements. This page is not one of Misplaced Pages's policies or guidelines as it has not been thoroughly vetted by the community.

Shortcuts

Explanatory essay

This page in a nutshell: Alternative text allows the content and function of an image to be understood by text-only readers.

WikiProject Accessibility
What is accessibility? Main discussion page FAQ and common pitfalls
Article guidelines Dos and don'ts Manual of Style: accessibility Alternative text for images Data tables tutorial
Template guidelines Template priorities Most widely used templates (Top 200 200–1000 Watchlist) Infobox accessibility
Coordination Manual of Style draft Methodology Resources and references Policy proposal Popular pages
For impaired users Using JAWS Keyboard shortcuts Style sheets Toggle VF
v t e

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 Misplaced Pages, 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:

]'' by ]]]

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.

For images that link to their image description page (which is nearly all images on Misplaced Pages), 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. 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.

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 |alt=photograph , |alt=painting, or |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 Misplaced Pages 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 Misplaced Pages 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

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, see Misplaced Pages: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. 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 |alt=refer to caption. Where nearby text in the article performs the same function, it can be |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

Shortcuts

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: |link=|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 |alt= and |link= attributes should not be used. It is Misplaced Pages'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 |alt=photograph, |alt=painting, |alt=sculpture, or |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 |alt=next page not |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 {{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 supports alt text since MediaWiki 1.18. {{Gallery}} and {{Multiple image}} also support it. For an example of 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 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 "|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 Misplaced Pages articles are links to the image description page, which contains a larger size version of the image, as well as licensing and attribution information.

Misplaced Pages 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 |link=|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 Misplaced Pages 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.

Examples

Examples of alternative text
Wikicode	Normal viewing	Screen reader	Rationale
] design still in use is ]'s 13th-century '']''.]]	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.
].]]	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.
]	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.

Unusual examples of alternative text
Wikitext	Normal viewing	Screen reader	Rationale
]	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 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.
<imagemap> File:Bryan-Sewall.jpg\|thumb\|upright=0.75\|center\|alt=1896 Democratic campaign poster circle 950 850 700 ] circle 2950 850 700 ] default </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.
Mercury, Venus, Earth, Mars.<br />]<br />Jupiter, Saturn, Uranus, Neptune.	Mercury, Venus, Earth, Mars. 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.
] <strong>Warning:</strong> Don't run with scissors.	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

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.

References

^ W3C. G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content; 11 December 2008 .
Lazar J, Allen A, Kleinman J, Malarkey C. What frustrates screen reader users on the web: a study of 100 blind users . Int J Hum Comput Interact. 2007;22(3):247–69. doi:10.1080/10447310709336964.
^ 2020 WebAIM. Center for Persons with Disabilities, Utah State University. Alternative Text .
^ 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: "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. Alternative Text Basics, accessed 30 September 2020.
W3C. 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
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, Context is Everything, accessed 30 September 2020.
W3C. Understanding Success Criterion 1.1.1; Understanding WCAG 2.0; 11 December 2008 .
Wikimedia bug 18682
Petrie, Helen; Harrison, Chandra; and Dev, Sundeep. 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.
W3C. H24: Providing text alternatives for the area elements of image maps, WCAG 2.0 technique.

External links

Requirements for providing text to act as an alternative for images – in the HTML 5 specification
Alt text, captions and titles for images, from the Australian Government Style Manual
How to write text descriptions (alt text) in BBC News articles
Altviewer tool for checking the alt text on an article

Categories: