Wikipedia

User:Rjjiii/Alt text

< User:Rjjiii
See also: Wikipedia:Manual of Style/Accessibility/Alternative text for images

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.

Guides

edit
Shortcut

Universities

edit
  • "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.

Organizations

edit

Experts

edit

FAQ

edit

Captions and nearby text

edit
Shortcut

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]]
 
Comparison of three different types of toothbrush

Images that contain words

edit
Shortcut

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]]
 
Gravestone of Adamson Tannehill, Allegheny Cemetery in Pittsburgh, Pennsylvania

Decorative images

edit
Shortcut

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]

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

  done 

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

  done

Infographics

edit
Shortcut

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".
 
Charles Minard's map of Napoleon's disastrous 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 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".

Large amounts of data

edit
Shortcut

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. ]]
 
By 1998, the phrase "first-person shooter" had firmly superseded "Doom clone".

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.]]
 
By 1998, the phrase "first-person shooter" had firmly superseded "Doom clone".

Glossary

edit
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]

References

edit

Reference examples

edit
  1. ^ "Accessibility - Alt Text for Images". University Center for Teaching and Learning. University of Pittsburgh. 2024. Retrieved 16 January 2024. Compare to example alt text: "beagle dog".
  2. ^ "What's the alternative? How to write good alt text". Design102. Government Communication Service. 2022. Retrieved 15 January 2024. Compare to alt attribute example: "A mural of actor Chadwick Boseman, graffitied on a wall. T’Challa, Boseman’s superhero character, has been painted in the background with the artist’s name, artful_dodger underneath. The words Black Panther Lives, Chadwick Boseman 1976 to 2020 also appear in graffiti.".
  3. ^ "Decorative Images". Web Accessibility Initiative (WAI). World Wide Web Consortium. 2019. Archived from the original on 2023-12-24. Compare to alt attribute example: "".
  4. ^ "NC State ServiceNow". Knowledge Base: Public Knowledge. North Carolina State University. 2021-07-29. Retrieved 15 January 2024. Compare to alt attribute example: "yes".
  5. ^ "Alternative Text Guidlines". Webguide. Boise State University. 2023. Archived from the original on 2023-12-25. Compare to alt attribute example: "Visual research infographic – full text description on page".
  6. ^ "Accessible images: complex image guidelines". ASU IT Accessibility. Arizona State University. 2022. Retrieved 16 January 2024. Compare to alt text example: "Bar graph of membership sales for 2019-2021 showing 2021 sales returning to pre-pandemic levels. See details below under the Resurging sales 2021 heading."
  7. ^ "Specific Guidelines - Text Only Images". DIAGRAM Center. Benetech. U.S. Department of Education, Office of Special Education Programs. 2019. Retrieved 16 January 2024. Compare to alt attribute example: "The figure is entitled 'FOREIGN TRADE OF COUNTRY X, 1968 through 1980, in United States dollars'. There are two lines on the graph, a dashed line labeled 'Exports' and a solid line labeled 'Imports'. The vertical axis is labeled 'Billions of Dollars,' beginning with zero to eighteen, in increments of 2. A note: one billion equals a one followed by 9 zeros.The horizontal axis is labeled 'Year' and lists all the years from 1968 through 1980.In the graph, the Exports line begins in 1968 at 3 billion dollars, rises steeply to 14 billion in 1974, then drops to 9.5 billion in 1975 and 1976. In 1977, the Exports line shoots up to 15.5 billion, then trails off to 10 billion in 1980.In the graph, the Imports line begins in 1968 at 2 billion and rises steadily to 8.75 billion in 1980, except for minor dips in 1972 and 1979.The data are summarized in the following table. Figures are in billions of dollars. All data are approximate.".

Citations

edit
  1. ^ "G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content". Techniques for WCAG 2.0. World Wide Web Consortium. 2008. Archived from the original on 2023-06-16.
  2. ^ "Using alt attributes on img elements". Techniques for WCAG 2.0. World Wide Web Consortium. 2016. Archived from the original on 16 May 2022.
  3. ^ "Logo Alt Text". Digital Accessibility at USC. University of South Carolina. 2020. Archived from the original on 22 July 2022.
  4. ^ "Google Explains Alt Text for Logos & Buttons". Search Engine Journal. 2022. Archived from the original on 3 November 2022.
  5. ^ "F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link". Techniques for WCAG 2.0. World Wide Web Consortium. 2016. Archived from the original on 2023-10-20.
  6. ^ a b "Alternative Text". Web Accessibility In Mind. 2021. "Context is Everything". Archived from the original on 2010-07-23.
  7. ^ "Writing Alternate (Alt) Text" (PDF). OCIO. National Institute of Health (NIH). Archived (PDF) from the original on 2022-02-15.
  8. ^ "GNU Free Documentation License". GNU Operating System. Free Software Foundation. 2022. Archived from the original on 2020-08-01.
  9. ^ "Best Practices for Creative Commons attributions - how to attribute works you reuse under a Creative Commons license". New Media Rights. 2023. Archived from the original on 2023-12-25.
  10. ^ "Write helpful Alt Text to describe images". HUIT Digital Accessibility. Harvard University. 2021. Archived from the original on 2023-12-06.
  11. ^ "Charts & Diagrams Alt Text". Digital Accessibility at USC. University of South Carolina. Retrieved 2023-12-26.
  12. ^ "Using alt attributes on img elements". World Wide Web Consortium. Archived from the original on 16 May 2022. Retrieved 13 October 2022.
  13. ^ "Help:Images".
  14. ^ "Alternative text for images". University Information Technology Services. Indiana University. 2023.
Retrieved from "https://en.wikipedia.org/w/index.php?title=User:Rjjiii/Alt_text&oldid=1243014293"