Help:Alt text

{{Shortcut|WP:ALTGUIDES}}

• {{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}}

• {{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}}

• {{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}}

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

{{automarkup

|File:Toothbrush x3 20050716 002.jpg

}}

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

{{automarkup

|File:Adamson Tannehill tombstone.jpg in Pittsburgh, Pennsylvania]]}}

{{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 similarly licensed images, unlink the image with a blank link attribute and use a blank alt attribute: {{para|link}}{{para|alt}}.{{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: "".
• 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,{{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}}{{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}} and linked images must have a non-blank alt attribute. As concisely as possible, describe the image.{{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".

{{automarkup

|File:Yes check.svg done

|File:Checkmark on Circle.png done

}}

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

{{automarkup

|File:Minard.png '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".

}}

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

{{automarkup

|File:Doom clone vs first person shooter.png" 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.{{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.".

{{automarkup

|File:Doom clone vs first person shooter.png" 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.

;Alt attribute

:The HTML attribute used on webpages to specify alternative text to be displayed in place of an element that cannot be rendered.{{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}}

;Alt parameter

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

;Alt text

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