User:Rjjiii/Alt text

This is an essay. It contains the advice or opinions of one or more Wikipedia contributors. This page is not an encyclopedia article, nor is it one of Wikipedia's policies or guidelines, as it has not been thoroughly vetted by the community. Some essays represent widespread norms; others only represent minority viewpoints.

Alt text is used instead of an image (or video) in situations where the media 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. It is part of the broader range of "alternative text" that also includes captions. The alternative text serves the same purpose as the image.^[1] On the web, alt text is supplied through the alt attribute. The World Wide Web Consortium (W3C) guidelines state that an image's alt attribute should convey meaning, rather than a literal description of the image itself.^[2] For example, the alt attribute on an institution's logo should convey that it is the institution's logo instead of describing details of what the logo looks like.^[3][4]

On Wikipedia, alt text is provided in the alt parameter in the MediaWiki markup. Many templates, like {{Infobox}}, have parameters for specifying alt text. For images that link to their description page (which is most images on Wikipedia), the alt parameter should not be blank, nor should the alt parameter be absent. A screen reader will default to reading out the image filename when no alt text is available.^[5][6] The alt attribute can only contain plain text (no HTML or wiki markup such as wikilinks) without line breaks. The alt text is read by screen readers before the caption, so avoid duplicating the caption.

• "Write helpful Alt Text to describe images". HUIT Digital Accessibility. Harvard University.
• "Step-by-Step Instructions for Writing Alt Text". Digital Accessibility at USC. University of South Carolina.
• "Alternative Text Guidlines". Webguide. Boise State University.
• "Alternative (Alt) Text Guide". Engineering Technology Services (ETS). Ohio State University.

• "An alt Decision Tree". Web Accessibility Initiative (WAI). World Wide Web Consortium.
• "Writing Alternate (Alt) Text" (PDF). OCIO. National Institute of Health (NIH).
• "HTMLImageElement: alt property". MDN. Mozilla.

• "WebAIM: Alternative Text". Web Accessibility In Mind.
• "What's the alternative? How to write good alt text". Design102. Government Communication Service.
• "Guide to Using Alt-text to Make Images More Accessible". The Open Notebook.

Question: If the image caption provides all necessary alternative text, what should the alt attribute be?

Answer: Use minimal alt text; avoid redundancy.^{[7][ex 1]}

Markup	Renders as
[[File:Toothbrush x3 20050716 002.jpg |thumb |right |upright=0.80 |alt=plastic toothbrushes |Comparison of three different types of toothbrush]]

Question: What if an image contains text?

Answer: If an image contains words important to the reader's understanding, the alternative text should contain those words.^{[ex 2]}

Markup	Renders as
[[File:Adamson Tannehill tombstone.jpg |thumb |alt= Tombstone engraved with "Sacred to the memory of / Gen'l Adamson Tannehill / who / after a long life spent in the / service of his country / expired / Dec. 23rd, 1820 / aged 71 years."|Gravestone of Adamson Tannehill, [[Allegheny Cemetery]] in Pittsburgh, Pennsylvania]]

Question: What if an image is purely decorative and does not convey essential meaning?

Answer: It depends on the license of the image:

• For public domain, CC0, or similarly licensed images, unlink the image with a blank link attribute and use a blank alt attribute: |link=|alt=.^{[ex 3]}
• For CC BY-SA, GFDL, or similarly licensed images, a blank alt attribute should not be used. It is Wikipedia's policy to link those images for attribution,^[8][9] and linked images must have a non-blank alt attribute. As concisely as possible, describe the image.^{[ex 4]}

[[File:Yes check.svg |20px |link= |alt=]] done

[[File:Checkmark on Circle.png |20px |alt=check]] done

Question: If the image is a map, diagram, infographic or other visual representation of complex data described in the article's body, what kind of information should go into the alt attribute?

Answer: If a complex image is described in the body of the text, the alt attribute can direct the reader to the caption, section, table, page text, or linked page.^{[10][ex 5]}

Markup	Renders as
[[File:Minard.png |thumb |center |alt=French map, full description on page|Charles Minard's map of [[Napoleon]]'s disastrous [[French invasion of Russia (1812)|Russian campaign of 1812]] ]] Minard is best known for his cartographic depiction of numerical data on a map of [[Napoleon]]'s disastrous losses suffered during the [[French invasion of Russia (1812)|Russian campaign of 1812]]. The illustration depicts Napoleon's army departing the Polish-Russian border. A thick band illustrates the size of his army at specific geographic points during their advance and retreat. It displays six types of data in two dimensions: the number of Napoleon's troops; the distance traveled; temperature; latitude and longitude; direction of travel; and location relative to specific dates without making mention of Napoleon; Minard's interest lay with the travails and sacrifices of the soldiers. The graphic is notable for its representation in two dimensions of six types of data: the number of Napoleon's troops; distance; temperature; the latitude and longitude; direction of travel; and location relative to specific dates. Statistician professor [[Edward Tufte]] described the graphic as what "may well be the best statistical graphic ever drawn".	Minard is best known for his cartographic depiction of numerical data on a map of Napoleon's disastrous losses suffered during the Russian campaign of 1812. The illustration depicts Napoleon's army departing the Polish-Russian border. A thick band illustrates the size of his army at specific geographic points during their advance and retreat. It displays six types of data in two dimensions: the number of Napoleon's troops; the distance traveled; temperature; latitude and longitude; direction of travel; and location relative to specific dates without making mention of Napoleon; Minard's interest lay with the travails and sacrifices of the soldiers. The graphic is notable for its representation in two dimensions of six types of data: the number of Napoleon's troops; distance; temperature; the latitude and longitude; direction of travel; and location relative to specific dates. Statistician professor Edward Tufte described the graphic as what "may well be the best statistical graphic ever drawn".

Question: What if the image is a chart or graph containing a large amount of data not present in the article's text? How much data should the alt attribute contain?

Answer: If possible, provide the data on the article page or a linked page.^{[11][ex 6]}

Markup	Renders as
[[File:Doom clone vs first person shooter.png|thumb|By 1998, the phrase "[[first-person shooter]]" had firmly superseded "''Doom'' clone".|alt=Double-line graph showing usage of the term "doom clone" on usenet falling as "first person shooter" rises, complete data at image link. ]]

If the data must go into the alt attribute, place a summary before the data.^{[ex 7]}

Markup	Renders as
[[File:Doom clone vs first person shooter.png|thumb|By 1998, the phrase "[[first-person shooter]]" had firmly superseded "''Doom'' clone".|alt=Double-line graph showing usage of the term "doom clone" on usenet falling as "first person shooter" rises. X-axis is years from 1993 to 2002. Y-axis shows usenet post counts ranging from 0 to 1200 per month. Red line ("doom+clone" or "doom+clones") peaks at about 400 in 1996, and tails off to zero again by 2002. Blue line ("first+person+shooter" or "first+person+shooters") grows mostly monotonically to about 1120 by 2002, with an intermediate peak of about 850 in 2000. The two lines cross in late 1997. Both lines are close to zero before late 1993, when "Doom released" is noted with a visual marker.]]

Alternative text

Text that provides the same essential information as an image in an article, provided by the alt attribute, image caption, and sometimes the body text.^[6]

Alt attribute

The HTML attribute used on webpages to specify alternative text to be displayed in place of an element that cannot be rendered.^[12]

Alt parameter

Wikitext markup that generates the HTML alt attribute.^[13]

Alt text

Text supplied for media's alt attribute or parameter.^[14]