View source for Help:Alt text

{{Cs1 config|mode=cs1}}<!--makes {{Citation}} render like {{cite xxx}} templates.-->
{{Use dmy dates}} 
{{see also|Wikipedia:Manual of Style/Accessibility/Alternative text for images}}
{{Wikipedia how to|HELP:ALT}}

'''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 [[Wikipedia:Captions|captions]]. The alternative text serves the same purpose as the image.<ref name="G94">{{Cite web |date=2008 |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 |url=http://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G94 |url-status=live |archive-url=https://web.archive.org/web/20230616102530/https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G94 |archive-date=2023-06-16 |website=Techniques for WCAG 2.0 |publisher=World Wide Web Consortium}}</ref> 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.<ref name="wcag_h37">{{Cite web |date=2016 |title=Using alt attributes on img elements |url=https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H37 |url-status=live |archive-url=https://web.archive.org/web/20220516223146/https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H37 |archive-date=16 May 2022 |website=Techniques for WCAG 2.0 |publisher=World Wide Web Consortium}}</ref> 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.<ref name="sc_logo">{{Cite web |date=2020 |title=Logo Alt Text |url=https://sc.edu/about/offices_and_divisions/digital-accessibility/toolbox/best_practices/alternative_text/logo-alt-text/index.php |url-status=live |archive-url=https://web.archive.org/web/20220722213601/https://sc.edu/about/offices_and_divisions/digital-accessibility/guides_tutorials/alternative_text/logo-alt-text/index.php |archive-date=22 July 2022 |website=Digital Accessibility at USC |publisher=University of South Carolina}}</ref><ref>{{Cite web |date=2022 |title=Google Explains Alt Text for Logos & Buttons |url=https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/ |url-status=live |archive-url=https://web.archive.org/web/20221103152738/https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/ |archive-date=3 November 2022 |website=Search Engine Journal}}</ref> 

On Wikipedia, alt text is provided in the <code>alt</code> parameter in the [[Wikipedia:Extended image syntax|MediaWiki markup]]. Many [[Help:Template|templates]], like {{tl|Infobox}}, have parameters for specifying alt text. For images that link to their description page (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.<ref>{{Cite web |date=2016 |title=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 |url=http://www.w3.org/TR/WCAG20-TECHS/F89.html |url-status=live |archive-url=https://web.archive.org/web/20231020161038/https://www.w3.org/TR/WCAG20-TECHS/F89.html |archive-date=2023-10-20 |website=Techniques for WCAG 2.0 |publisher=World Wide Web Consortium}}</ref><ref name="webaim2021">{{Cite web |date=2021 |title=Alternative Text |url=https://webaim.org/techniques/alttext/#context |url-status=live |archive-url=https://web.archive.org/web/20100723010451/http://www.webaim.org/techniques/images/longdesc.php#context |archive-date=2010-07-23 |publisher=Web Accessibility In Mind |at="Context is Everything"}}</ref> 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 ==
{{Shortcut|WP:ALTGUIDES}}

=== Universities ===

* {{Cite web |title=Write helpful Alt Text to describe images |url=https://accessibility.huit.harvard.edu/describe-content-images |website=HUIT Digital Accessibility |publisher=Harvard University}}
* {{Cite web |title=Step-by-Step Instructions for Writing Alt Text |url=https://www.sc.edu/about/offices_and_divisions/digital-accessibility/toolbox/best_practices/alternative_text/step-by-step-instructions-alt-text/ |website=Digital Accessibility at USC |publisher=University of South Carolina}}
* {{Cite web |title=Alternative Text Guidlines |url=https://www.boisestate.edu/webguide/alt-text-guidlines/ |website=Webguide |publisher=Boise State University}}
* {{Cite web |title=Alternative (Alt) Text Guide |url=https://ets.osu.edu/digital-accessibility/alternative-alt-text-guide |website=Engineering Technology Services (ETS) |publisher=Ohio State University}}

=== Organizations ===

* {{Cite web |title=An alt Decision Tree |url=https://www.w3.org/WAI/tutorials/images/decision-tree/ |website=Web Accessibility Initiative (WAI) |publisher=World Wide Web Consortium}}
* {{Cite web |title=Writing Alternate (Alt) Text |url=https://web.archive.org/web/20240106035953/https://ocio.nih.gov/ITGovPolicy/NIH508/Documents/NIH_508_Writing_Alt_text.pdf |website=OCIO |publisher=National Institute of Health (NIH)}}
* {{Cite web |title=HTMLImageElement: alt property |url=https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt |website=MDN |publisher=Mozilla}}
* {{Cite web |date=July 2024 |title=Authoring Meaningful Alternative Text |url=https://www.section508.gov/create/alternative-text/ |website=Section508.gov |language=en}}

=== Experts ===

* {{Cite web |title=WebAIM: Alternative Text |url=https://webaim.org/techniques/alttext/ |publisher=Web Accessibility In Mind}}
* {{Cite web |title=What’s the alternative? How to write good alt text |url=https://design102.blog.gov.uk/2022/01/14/whats-the-alternative-how-to-write-good-alt-text/ |website=Design102 |publisher=Government Communication Service}}
* {{Cite web |title=Guide to Using Alt-text to Make Images More Accessible |url=https://www.theopennotebook.com/guide-to-using-alt-text-to-make-images-more-accessible/ |publisher=The Open Notebook}}
* {{Cite web |date=22 November 2024 |title=Alt Text: What to Write |url=https://www.nngroup.com/articles/write-alt-text/ |website=Nielsen Norman Group |language=en}}

== FAQ ==

===Captions and nearby text===
{{Shortcut|WP:ALTCAPTION}}
'''Question''': If the image caption provides all necessary alternative text, what should the alt attribute be?

'''Answer''': Use minimal alt text; avoid redundancy.<ref>{{Cite web |title=Writing Alternate (Alt) Text |url=https://ocio.nih.gov/ITGovPolicy/NIH508/Documents/NIH_508_Writing_Alt_text.pdf |url-status=dead |archive-url=https://web.archive.org/web/20220215161403/https://ocio.nih.gov/ITGovPolicy/NIH508/Documents/NIH_508_Writing_Alt_text.pdf |archive-date=2022-02-15 |website=OCIO |publisher=National Institute of Health (NIH)}}</ref><ref group="ex">{{Cite web |date=2024 |title=Accessibility - Alt Text for Images |url=https://teaching.pitt.edu/resources/accessibility-alt-text-for-images/ |access-date=16 January 2024 |website=University Center for Teaching and Learning |publisher=University of Pittsburgh}} Compare to example alt text: "beagle dog".</ref>

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

===Images that contain words===
{{Shortcut|WP:ALTWORDS}}

'''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.<ref group="ex">{{Cite web |date=2022 |title=What’s the alternative? How to write good alt text |url=https://design102.blog.gov.uk/2022/01/14/whats-the-alternative-how-to-write-good-alt-text/ |access-date=15 January 2024 |website=Design102 |publisher=Government Communication Service}} 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.".</ref><ref group="ex">{{Cite web |date=July 2024 |title=Authoring Meaningful Alternative Text |url=https://www.section508.gov/create/alternative-text/ |website=Section508.gov |language=en}} Compare to alt attribute example: "Organizational chart. Top level: Mario Ramirez Estrada, President. Reporting to Mario Ramirez Estrada: Anna Falkner, Vice President. Group also reporting to Mario Ramirez Estrada: Fiona Welch, IT Manager; Jamal Holt, Design Manager; Ayishah Newell, Project Manager. Reporting to Fiona Welch: Honora Bernhard, Senior IT Specialist; Jake Lyon, IT Specialist; Carter D’Agostino, IT Specialist. Reporting to Jamal Holt: Yukio Hayasaka, Creative Director; Isabel Sancho, Designer; Timoti Wattana, Junior Designer. Reporting to Ayishah Newell: C.J. Stenger, Support Manager; Richard Christiansen, Assistant."</ref>

{{automarkup
|[[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]]}}

=== Decorative images===
{{Shortcut|WP:ALTICON}}

'''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 [[Public-domain-equivalent license|similarly licensed]] images, unlink the image with a blank link attribute and use a blank alt attribute: '''{{para|link}}{{para|alt}}'''.<ref group="ex">{{Cite web |date=2019 |title=Decorative Images |url=https://www.w3.org/WAI/tutorials/images/decorative/ |url-status=live |archive-url=https://web.archive.org/web/20231224205614/https://www.w3.org/WAI/tutorials/images/decorative/ |archive-date=2023-12-24 |website=Web Accessibility Initiative (WAI) |publisher=World Wide Web Consortium |language=en}} Compare to alt attribute example: "".</ref>
* 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,<ref>{{Cite web |date=2022 |title=GNU Free Documentation License |url=https://www.gnu.org/licenses/fdl-1.3.html |url-status=live |archive-url=https://web.archive.org/web/20200801133613/http://www.gnu.org/licenses/fdl-1.3.html |archive-date=2020-08-01 |website=GNU Operating System |publisher=Free Software Foundation}}</ref><ref>{{Cite web |date=2023 |title=Best Practices for Creative Commons attributions - how to attribute works you reuse under a Creative Commons license |url=https://www.newmediarights.org/guide/how_to/creative_commons/best_practices_creative_commons_attributions |url-status=live |archive-url=https://web.archive.org/web/20231225193605/https://www.newmediarights.org/guide/how_to/creative_commons/best_practices_creative_commons_attributions |archive-date=2023-12-25 |website=New Media Rights}}</ref> and linked images must have a non-blank alt attribute. As concisely as possible, describe the image.<ref group="ex">{{Cite web |date=2021-07-29 |title=NC State ServiceNow |url=https://ncsu.service-now.com/kb_view.do?sys_kb_id=https://ncsu.service-now.com/kb_view.do?sysparm_article=KB0015150 |access-date=15 January 2024 |website=Knowledge Base: Public Knowledge |publisher=North Carolina State University}} Compare to alt attribute example: "yes".</ref>

{{automarkup
|[[File:Yes check.svg |20px |link= |alt=]] done
|[[File:Checkmark on Circle.png |20px |alt=check]] done
}}

=== Infographics ===
{{Shortcut|WP:ALTMAP}}

'''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.<ref>{{Cite web |date=2021 |title=Write helpful Alt Text to describe images |url=https://accessibility.huit.harvard.edu/describe-content-images |url-status=live |archive-url=https://web.archive.org/web/20231206183437/https://accessibility.huit.harvard.edu/describe-content-images |archive-date=2023-12-06 |website=HUIT Digital Accessibility |publisher=Harvard University}}</ref><ref group="ex">{{Cite web |date=2023 |title=Alternative Text Guidlines |url=https://www.boisestate.edu/webguide/alt-text-guidlines/ |url-status=live |archive-url=https://web.archive.org/web/20231225010401/https://www.boisestate.edu/webguide/alt-text-guidlines/ |archive-date=2023-12-25 |website=Webguide |publisher=Boise State University}} Compare to alt attribute example: "Visual research infographic – full text description on page".</ref>

{{automarkup
|[[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".
}}

=== Large amounts of data ===
{{Shortcut|WP:ALTDATA}}
'''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.<ref>{{Cite web |title=Charts & Diagrams Alt Text |url=https://www.sc.edu/about/offices_and_divisions/digital-accessibility/toolbox/best_practices/alternative_text/charts-diagrams/index.php |access-date=2023-12-26 |website=Digital Accessibility at USC |publisher=University of South Carolina}}</ref><ref group="ex">{{Cite web |date=2022 |title=Accessible images: complex image guidelines |url=https://accessibility.asu.edu/articles/complex-images |access-date=16 January 2024 |website=ASU IT Accessibility |publisher=Arizona State University}} 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."</ref>

{{automarkup
|[[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.<ref group="ex">{{Cite web |date=2019 |title=Specific Guidelines - Text Only Images |url=http://diagramcenter.org/specific-guidelines-i.html |access-date=16 January 2024 |website=DIAGRAM Center |publisher=Benetech. U.S. Department of Education, Office of Special Education Programs}} 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.".</ref>

{{automarkup
|[[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.]]
}}

== Glossary ==
;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.<ref name="webaim2021" />

;Alt attribute
:The [[HTML attribute]] used on webpages to specify alternative text to be displayed in place of an [[HTML element|element]] that cannot be rendered.<ref>{{Cite web |title=Using alt attributes on img elements |url=https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H37 |url-status=live |archive-url=https://web.archive.org/web/20220516223146/https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H37 |archive-date=16 May 2022 |access-date=13 October 2022 |website=[[World Wide Web Consortium]]}}</ref>

;Alt parameter
:Wikitext markup that generates the HTML alt attribute.<ref>{{Cite web |title=Help:Images |url=https://www.mediawiki.org/wiki/Help:Images}}</ref>

;Alt text
:Text supplied for media's alt attribute or parameter.<ref>{{Cite web |date=2023 |title=Alternative text for images |url=https://kb.iu.edu/d/arwg |website=University Information Technology Services |publisher=Indiana University}}</ref>

== References ==
===Reference examples===
<references group=ex />

===Citations===
<references/>