View source for Alt attribute

{{good article}}
{{Use dmy dates|date=October 2022}}
{{HTML}}
{{Self reference|For the use of alt attributes in Wikipedia, see [[Wikipedia:Alternative text for images]].}}
{{short description|Alternative text that appears when a HTML element cannot be rendered}}
{{lowercase|alt attribute}}
The '''alt attribute''' is the [[HTML attribute]] used in [[HTML]] and [[XHTML]] documents to specify alternative [[Plain text|text]] ('''alt text''') that is to be displayed in place of an [[HTML element|element]] that cannot be rendered. The alt attribute is used for short descriptions, with longer descriptions using the [[longdesc attribute]]. The standards organization for the [[World Wide Web]], the [[World Wide Web Consortium]] (W3C), recommends that every image displayed through HTML have an alt attribute, though the alt attribute does not need to contain text. The lack of proper alt attributes on website images has led to several accessibility-related lawsuits.

The alt attribute is used to increase accessibility and user friendliness, including for blind internet users who rely on special software for web browsing. The use of the alt attribute for images displayed within HTML is part of W3C's [[Web Content Accessibility Guidelines]] (WCAG). [[Screen reader]]s and [[text-based web browser]]s read the alt attribute in place of the image. The text within the alt attribute substitutes the image when [[copy-paste]]d as text and makes images more [[Machine-readable data|machine-readable]], which improves [[search engine optimization]] (SEO).

==History==
The attribute was first introduced in the HTML 1.2 draft in 1993 to provide support for text-based browsers.<ref name="ietfiiir">{{Cite web |last1=Berners-Lee |first1=Tim |author-link=Tim Berners-Lee |last2=Connolly |first2=Daniel |author-link2=Dan Connolly (computer scientist) |date=June 1993 |title=Hypertext Markup Language (HTML) Internet Draft version 1.2 |url=https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt |url-status=live |archive-url=https://web.archive.org/web/20170103041713/https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt |archive-date=3 January 2017 |access-date=18 September 2010 |publisher=IETF IIIR Working Group}}</ref> In [[HTML 4.01]], which was released in 1999, the attribute was made to be a requirement for the img and area [[HTML tag|tag]]s.<ref name="w3c1999">{{Cite web |date=24 December 1999 |title=13 Objects, Images, and Applets |url=http://www.w3.org/TR/html401/struct/objects.html#adef-alt |url-status=live |archive-url=https://web.archive.org/web/20080906001213/http://www.w3.org/TR/html401/struct/objects.html#adef-alt |archive-date=6 September 2008 |access-date=4 December 2005 |publisher=[[World Wide Web Consortium]]}}</ref> It is optional for the input tag and the deprecated [[applet]] tag.<ref name="hazaël-massieux">{{Cite web |last=Hazaël-Massieux |first=Dominique |date=20 November 2002 |title=Use the alt attribute to describe the function of each visual |url=https://www.w3.org/QA/Tips/altAttribute |url-status=live |archive-url=https://web.archive.org/web/20220320214305/https://www.w3.org/QA/Tips/altAttribute |archive-date=20 March 2022 |access-date=14 October 2022 |website=[[World Wide Web Consortium]]}}</ref>

[[Internet Explorer 7]] and earlier render text in alt attributes as [[tooltip]] text, which is not compliant with the [[World Wide Web Consortium]] (W3C)'s HTML standards.<ref name="moz">{{Cite web |title=Why doesn't Mozilla display my alt tooltips? |url=https://developer.mozilla.org/en/Mozilla_Web_Developer_FAQ#Why_doesn.E2.80.99t_Mozilla_display_my_alt_tooltips.3F |url-status=dead |archive-url=https://web.archive.org/web/20081015232141/http://developer.mozilla.org/en/Mozilla_Web_Developer_FAQ#Why_doesn.E2.80.99t_Mozilla_display_my_alt_tooltips.3F |archive-date=15 October 2008 |access-date=22 July 2009 |website=[[MDN Web Docs]]}}</ref> This behavior led many [[web developer]]s to misuse the alt attribute when they wished to display tooltips containing additional information about images, instead of using the title attribute that was intended for that use.<ref name="flavell">{{Cite web |last=Flavell |first=A.J. |title=Use of ALT texts in IMGs |url=https://www.htmlhelp.com/feature/art3.htm |url-status=live |archive-url=https://web.archive.org/web/20220108230541/https://www.htmlhelp.com/feature/art3.htm |archive-date=8 January 2022 |access-date=16 October 2022 |website=www.htmlhelp.com}}</ref><ref>{{Cite web |last=W3C HTML WG |date=24 December 1999 |title=7.4.3 The title attribute |url=http://www.w3.org/TR/html4/struct/global.html#h-7.4.3 |url-status=live |archive-url=https://web.archive.org/web/20090726044334/http://www.w3.org/TR/html4/struct/global.html#h-7.4.3 |archive-date=26 July 2009 |access-date=22 July 2009 |website=HTML 4.01 Specification |publisher=W3C}}</ref> As of [[Internet Explorer 8]], released in 2009, alt attributes no longer render as tooltips on Internet Explorer.<ref>{{Cite web |title=What's New in Internet Explorer 8&nbsp;– Accessibility and ARIA |url=http://msdn.microsoft.com/en-us/library/cc288472.aspx#access |url-status=live |archive-url=https://web.archive.org/web/20090228115639/http://msdn.microsoft.com/en-us/library/cc288472.aspx |archive-date=28 February 2009 |access-date=22 July 2009 |website=MSDN |publisher=Microsoft}}</ref>

==Usage==
[[File:Alt attribute example.png|thumb|alt=Example image of what displays when the alt text is shown|An example of alt attribute text being displayed in place of an unavailable image, with the underlying HTML displayed below it]]
[[File:Wikipedia Wolf article displayed on Lynx.png|thumb|alt=A screenshot of a Wikipedia article using alt text in the Lynx browser|The [[Wolf|Wikipedia article for Wolf]] on the [[Lynx (web browser)|Lynx web browser]], displaying the text of the alt attribute in orange in place of the images]]
The text in the alt attribute is used to replace the image when the image cannot be loaded, without changing the intended meaning of the page's contents.<ref name="mozilladev">{{Cite web |title=HTMLImageElement.alt |url=https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt |url-status=live |archive-url=https://web.archive.org/web/20220822212522/https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt |archive-date=22 August 2022 |access-date=14 October 2022 |website=[[Mozilla]]}}</ref> The W3C's web content accessibility guidelines state that the alt attribute is used to convey the meaning and intent of the image, rather than being a literal description of the image itself.<ref name="wcag_h37">{{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>  For example, an alt attribute for an image of an institution's logo should convey that it is the institution's logo rather than describing details of what the logo looks like.<ref name="sc_logo">{{Cite web |title=Logo Alt Text |url=https://sc.edu/about/offices_and_divisions/digital-accessibility/guides_tutorials/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 |access-date=15 October 2022 |website=[[University of South Carolina]]}}</ref><ref>{{Cite web |last=Montti |first=Roger |date=2022-11-01 |title=Google Explains Alt Text for Logos & Buttons |url=https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/ |access-date=2022-11-03 |website=Search Engine Journal |language=en |archive-date=3 November 2022 |archive-url=https://web.archive.org/web/20221103152738/https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/ |url-status=live }}</ref> The alt attribute is intended to be used for short and concise descriptions of the image. Longer descriptions can be given using the longdesc attribute, which provides more detailed information and complements but does not replace the alt attribute.<ref name="w3c1999" />

A screen reader such as [[Orca (assistive technology)|Orca]] will read out the alt text in place of the image.<ref name="hofmann">{{Cite web |last1=Hofmann |first1=Frank |last2=Beckert |first2=Axel |year=2021 |title=Text Art: Rendering images as text |url=https://www.linux-magazine.com/Online/Features/Converting-Images-to-Text/(offset)/3 |url-status=live |archive-url=https://web.archive.org/web/20221015064058/https://www.linux-magazine.com/Online/Features/Converting-Images-to-Text/%28offset%29/3 |archive-date=15 October 2022 |access-date=14 October 2022 |website=[[Linux Magazine]]}}</ref> A text-based web browser such as [[Lynx (web browser)|Lynx]] will display the alt text instead of the image (or will display the value attribute if the image is a [[Button (computing)|clickable button]]).<ref name="lynxman">{{Cite web |title=Lynx Users Guide v2.8.9 |url=https://lynx.invisible-island.net/lynx_help/Lynx_users_guide.html |url-status=live |archive-url=https://web.archive.org/web/20190204065859/https://lynx.invisible-island.net/lynx_help/Lynx_users_guide.html |archive-date=4 February 2019 |access-date=15 October 2022 |website=lynx.invisible-island.net}}</ref> A graphical browser typically will display only the image, and will display the alt text only if the user views the image's properties, or has configured the browser not to display images, or if the browser was unable to retrieve or to decode the image.<ref name="pennstate">{{Cite web |title=Image ALT Text |url=https://accessibility.psu.edu/images/alttext/ |url-status=live |archive-url=https://web.archive.org/web/20221012021810/https://accessibility.psu.edu/images/alttext/ |archive-date=12 October 2022 |access-date=14 October 2022 |website=[[Pennsylvania State University]]|date=6 October 2014 }}</ref>

The use of descriptions in the alt attribute improves search engine optimization and allows image-specific search engines, such as [[Google Images]], to search for and display relevant images that are used on websites in search results.<ref name="googledev">{{Cite web |date=20 September 2022 |title=Google Images best practices |url=https://developers.google.com/search/docs/appearance/google-images |url-status=live |archive-url=https://web.archive.org/web/20221014094659/https://developers.google.com/search/docs/appearance/google-images |archive-date=14 October 2022 |access-date=14 October 2022 |website=[[Google Developers]]}}</ref> For non-image search results, the text within the alt attribute is read by search engines the same way that regular text on the page is read.<ref name="southern">{{Cite web |last=Southern |first=Matt G. |date=22 March 2022 |title=Google: Alt Text Only A Factor For Image Search |url=https://www.searchenginejournal.com/google-alt-text-only-a-factor-for-image-search/442865/#close |url-status=live |archive-url=https://web.archive.org/web/20220422141742/https://www.searchenginejournal.com/google-alt-text-only-a-factor-for-image-search/442865/#close |archive-date=22 April 2022 |access-date=14 October 2022 |website=Search Engine Journal }}</ref>

The W3C recommends that images that convey no information, but are purely decorative, be specified in [[CSS]] rather than in the HTML markup. If decorative images are rendered using HTML that do not add to the content and provide no additional information, then the W3C recommends that a blank alt attribute be included in the form of <code>alt=""</code>.<ref name="w3c">{{Cite web |website=W3C |title=Embedded content – HTML 5 |url=https://www.w3.org/TR/html5/embedded-content-0.html#a-purely-decorative-image-that-doesn't-add-any-information |url-status=live |archive-url=https://web.archive.org/web/20170702051717/http://www.w3.org/TR/html5/embedded-content-0.html#a-purely-decorative-image-that-doesn't-add-any-information |archive-date=2 July 2017 |access-date=29 June 2017}}</ref> This makes the page more navigable for users of screen readers or non-graphical browsers by skipping over images that do not convey any meaning.  If no alt attribute has been supplied, then browsers that cannot display the image will not overlook the image but instead will read or display the URL or another identifying marker.<ref name="solovieva">{{Cite journal |last1=Solovieva |first1=Tatiana I. |last2=Bock |first2=Jeremy M. |year=2014 |title=Monitoring for Accessibility and University Websites: Meeting the Needs of People with Disabilities |url=https://eric.ed.gov/?id=EJ1040525 |url-status=live |journal=Journal of Postsecondary Education and Disability |volume=27 |issue=2 |pages=113–127 |archive-url=https://web.archive.org/web/20221014232614/https://eric.ed.gov/?id=EJ1040525 |archive-date=14 October 2022 |access-date=14 October 2022 |via=[[Education Resources Information Center]]}}</ref> This creates ambiguity since the user is generally unable to determine from a bare reading of a URL if the image is relevant to the text or if it is a purely decorative element of the webpage.<ref name="curl">{{Cite journal |last1=Curl |first1=Angela L. |last2=Bowers |first2=Deborah D. |date=23 April 2009 |title=A Longitudinal Study of Website Accessibility: Have Social Work Education Websites Become More Accessible? |url=http://www.tandfonline.com/doi/abs/10.1080/15228830902749229 |url-status=live |journal=Journal of Technology in Human Services |language=en |volume=27 |issue=2 |pages=93–105 |doi=10.1080/15228830902749229 |hdl=2374.MIA/5279 |s2cid=143667951 |url-access=subscription |archive-url=https://web.archive.org/web/20221014232615/https://www.tandfonline.com/doi/abs/10.1080/15228830902749229 |archive-date=14 October 2022 |access-date=14 October 2022|hdl-access=free }}</ref> A 2021 [[Google Lighthouse]] audit showed that 27% of alt text attributes audited were empty, despite the fact that the majority of those images were non-decorative informational images.<ref name="almanac">{{Cite web |last1=Tait |first1=Alex |last2=Davis |first2=Scott |last3=Niyi-Awosusi |first3=Olu |last4=Wilhelm |first4=Gary |last5=Dixon |first5=Carlie |date=30 November 2021 |title=Part II Chapter 9 – Accessibility |url=https://almanac.httparchive.org/en/2021/accessibility |access-date=14 October 2022 |website=Web Almanac by HTTParchive.org}}</ref>

==Lawsuits==
There have been many lawsuits over website accessibility and the lack of proper alt attributes on websites.<ref name="solovieva" /> ''[[Maguire v Sydney Organising Committee for the Olympic Games (2000)|Maguire v Sydney Organising Committee for the Olympic Games]]'' was a 2000 lawsuit in which a blind man in Australia sued the [[Sydney Organising Committee for the Olympic Games]] because their website www.olympics.com was not accessible to him because of the lack of alt attributes on images.<ref name="white">{{Cite news |last=White |first=Caroline |date=2 November 2000 |title=Battle to be equal |work=[[The Guardian]] |url=https://www.newspapers.com/clip/111280702/battle-to-be-equal/ |url-status=live |access-date=14 October 2022 |archive-url=https://web.archive.org/web/20221014084006/https://www.newspapers.com/clip/111280702/battle-to-be-equal/ |archive-date=14 October 2022 |via=[[Newspapers.com]]}}</ref> The [[Australian Human Rights Commission]] ruled that the website had discriminated against him for failing to conform to accessibility standards that enable blind individuals to navigate websites.<ref name="barkham">{{Cite web |last=Barkham |first=Patrick |date=30 August 2000 |title=Website 'discriminated against blind' |url=https://www.theguardian.com/technology/2000/aug/30/internetnews.sydney |url-status=live |archive-url=https://web.archive.org/web/20160823132558/https://www.theguardian.com/technology/2000/aug/30/internetnews.sydney |archive-date=23 August 2016 |access-date=14 October 2022 |website=[[The Guardian]]}}</ref> During the lawsuit, the Australian commonwealth, state and territory governments issued a joint statement through the [[Department of Broadband, Communications and the Digital Economy]] that they were adopting the W3C's accessibility guidelines for all .gov.au websites.<ref name="dbcde">{{Cite web |date=30 June 2000 |title=Seventh Ministerial meeting of the Online Council – Media release |url=http://www.dbcde.gov.au/Article/0,,0_4-2_4008-4_15092,00.html |url-status=dead |archive-url=https://web.archive.org/web/20130620081938/http://www.dbcde.gov.au/Article/0,,0_4-2_4008-4_15092,00.html |archive-date=20 June 2013 |access-date=14 October 2022 |website=[[Department of Broadband, Communications and the Digital Economy|Australian Department of Broadband, Communications and the Digital Economy]]}}</ref>

In the United States, there have been several high-profile lawsuits involving the lack of alt attributes on images that cite a violation of the [[Americans with Disabilities Act]] (ADA).<ref name="cohen">{{Cite journal |last1=Cohen |first1=Alex H. |last2=Fresneda |first2=Jorge E. |last3=Anderson |first3=Rolph E. |date=September 2020 |title=What retailers need to understand about website inaccessibility and disabled consumers: Challenges and opportunities |url=https://onlinelibrary.wiley.com/doi/10.1111/joca.12307 |journal=Journal of Consumer Affairs |language=en |volume=54 |issue=3 |pages=854–889 |doi=10.1111/joca.12307 |s2cid=225771708 |issn=0022-0078 |url-access=subscription}}</ref> The [[United States Department of Justice]] gives the lack of alt attributes as an example of a barrier to website accessibility.<ref name="ada.gov">{{Cite web |date=18 March 2022 |title=Guidance on Web Accessibility and the ADA |url=https://beta.ada.gov/resources/web-guidance/ |url-status=live |archive-url=https://web.archive.org/web/20221013080830/https://beta.ada.gov/resources/web-guidance/ |archive-date=13 October 2022 |access-date=14 October 2022 |website=ADA.gov}}</ref> ''[[National Federation of the Blind v. Target Corp.]]'' was a 2006 class-action lawsuit that alleged that [[Target.com]] violated the ADA because the images did not use alt attributes.<ref name="daniels">{{Cite web |last=Daniels |first=Linda Markus |date=13 September 2006 |title=Websites for the Blind: Is This The Next 'Year 2000 Compliant' Requirement? |url=http://localtechwire.com/business/local_tech_wire/biotech/story/1167848/ |url-status=dead |archive-url=https://web.archive.org/web/20080916100355/http://localtechwire.com/business/local_tech_wire/biotech/story/1167848/ |archive-date=16 September 2008 |access-date=14 October 2022 |publisher=[[WRAL-TV]]}}</ref> This lawsuit set a legal precedent in the United States for website accessibility and compliance with the ADA.<ref name="frank">{{Cite book |last=Frank |first=Jonathan |title=Proceedings of the 41st Annual Hawaii International Conference on System Sciences (HICSS 2008) |chapter=Web Accessibility for the Blind: Corporate Social Responsibility or Litigation Avoidance? |date=January 2008 |chapter-url=https://ieeexplore.ieee.org/document/4438989 |url-status=live |location=Waikoloa, HI |publisher=IEEE |pages=284 |doi=10.1109/HICSS.2008.497 |s2cid=16280255 |archive-url=https://web.archive.org/web/20210308045947/https://ieeexplore.ieee.org/document/4438989/ |archive-date=8 March 2021 |access-date=14 October 2022 |chapter-url-access=subscription}}</ref>

==References==
{{reflist}}

==External links==
* [http://webaim.org/techniques/alttext/ Appropriate Use of Alternative Text] from WebAIM
* [http://www.hixie.ch/advocacy/alttext Mini-FAQ about the alternate text of images] by [[Ian Hickson]]

[[Category:HTML]]
[[Category:Internet properties established in 1995]]
[[Category:Web accessibility]]