Alt attribute

Last updated

The alt attribute is the HTML attribute used in HTML and XHTML documents to specify alternative text (alt text) that is to be displayed in place of an 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.

Contents

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 readers and text-based web browsers read the alt attribute in place of the image. The text within the alt attribute substitutes the image when copy-pasted as text and makes images more 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. [1] In HTML 4.01, which was released in 1999, the attribute was made to be a requirement for the img and area tags. [2] It is optional for the input tag and the deprecated applet tag. [3]

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. [4] This behavior led many web developers 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. [5] [6] As of Internet Explorer 8, released in 2009, alt attributes no longer render as tooltips on Internet Explorer. [7]

Usage

An example of alt attribute text being displayed in place of an unavailable image, with the underlying HTML displayed below it Alt attribute example.png
An example of alt attribute text being displayed in place of an unavailable image, with the underlying HTML displayed below it
The Wikipedia article for Wolf on the Lynx web browser, displaying the text of the alt attribute in orange in place of the images Wikipedia Wolf article displayed on Lynx.png
The Wikipedia article for Wolf on the 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. [8] 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. [9] 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. [10] [11] 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. [2]

A screen reader such as Orca will read out the alt text in place of the image. [12] A text-based web browser such as Lynx will display the alt text instead of the image (or will display the value attribute if the image is a clickable button). [13] 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. [14]

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. [15] 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. [16]

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 alt="". [17] 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. [18] 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. [19] 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. [20]

Lawsuits

There have been many lawsuits over website accessibility and the lack of proper alt attributes on websites. [18] 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. [21] 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. [22] 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. [23]

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). [24] The United States Department of Justice gives the lack of alt attributes as an example of a barrier to website accessibility. [25] 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. [26] This lawsuit set a legal precedent in the United States for website accessibility and compliance with the ADA. [27]

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

<span class="mw-page-title-main">World Wide Web</span> Linked hypertext system on the Internet

The World Wide Web is an information system that enables content sharing over the Internet through user-friendly ways meant to appeal to users beyond IT specialists and hobbyists. It allows documents and other web resources to be accessed over the Internet according to specific rules of the Hypertext Transfer Protocol (HTTP).

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

In HTML and XHTML, an image map is a list of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations. For example, a map of the world may have each country hyperlinked to further information about that country. The intention of an image map is to provide an easy way of linking various parts of an image without dividing the image into separate image files.

A HTML editor is a program used for editing HTML, the markup of a web page. Although the HTML markup in a web page can be controlled with any text editor, specialized HTML editors can offer convenience, added functionality, and organisation. For example, many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Web accessibility, or eAccessibility, is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed. When sites are correctly designed, developed and edited, more users have equal access to information and functionality.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

In a web browser, an access key or accesskey allows a computer user to immediately jump to a specific web page via the keyboard. They were introduced in 1999 and quickly achieved near-universal browser support.

In HTML, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

<span class="mw-page-title-main">HTML5</span> Fifth and previous version of hypertext markup language

HTML5 is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is now a retired World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.

<span class="mw-page-title-main">Semantic HTML</span> HTML used to reinforce meaning of documents or webpages

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in web pages and web applications rather than merely to define its presentation or look. Semantic HTML is processed by traditional web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.

Extensible HyperText Markup Language (XHTML) is part of the family of XML markup languages which mirrors or extends versions of the widely used HyperText Markup Language (HTML), the language in which Web pages are formulated.

Animation of Scalable Vector Graphics, an open XML-based standard vector graphics format is possible through various means:

<span class="mw-page-title-main">CSS</span> Style sheet language

Cascading Style Sheets (CSS) is a style sheet language used for specifying the presentation and styling of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

The Web platform is a collection of technologies developed as open standards by the World Wide Web Consortium and other standardization bodies such as the Web Hypertext Application Technology Working Group, the Unicode Consortium, the Internet Engineering Task Force, and Ecma International. It is the umbrella term introduced by the World Wide Web Consortium, and in 2011 it was defined as "a platform for innovation, consolidation and cost efficiencies" by W3C CEO Jeff Jaffe. Being built on The evergreen Web has allowed for the addition of new capabilities while addressing security and privacy risks. Additionally, developers are enabled to build interoperable content on a cohesive platform.

References

  1. ↑ Berners-Lee, Tim; Connolly, Daniel (June 1993). "Hypertext Markup Language (HTML) Internet Draft version 1.2". IETF IIIR Working Group. Archived from the original on 3 January 2017. Retrieved 18 September 2010.
  2. 1 2 "13 Objects, Images, and Applets". World Wide Web Consortium. 24 December 1999. Archived from the original on 6 September 2008. Retrieved 4 December 2005.
  3. ↑ Hazaël-Massieux, Dominique (20 November 2002). "Use the alt attribute to describe the function of each visual". World Wide Web Consortium . Archived from the original on 20 March 2022. Retrieved 14 October 2022.
  4. ↑ "Why doesn't Mozilla display my alt tooltips?". MDN Web Docs . Archived from the original on 15 October 2008. Retrieved 22 July 2009.
  5. ↑ Flavell, A.J. "Use of ALT texts in IMGs". www.htmlhelp.com. Archived from the original on 8 January 2022. Retrieved 16 October 2022.
  6. ↑ W3C HTML WG (24 December 1999). "7.4.3 The title attribute". HTML 4.01 Specification. W3C. Archived from the original on 26 July 2009. Retrieved 22 July 2009.{{cite web}}: CS1 maint: numeric names: authors list (link)
  7. ↑ "What's New in Internet Explorer 8 – Accessibility and ARIA". MSDN. Microsoft. Archived from the original on 28 February 2009. Retrieved 22 July 2009.
  8. ↑ "HTMLImageElement.alt". Mozilla . Archived from the original on 22 August 2022. Retrieved 14 October 2022.
  9. ↑ "Using alt attributes on img elements". World Wide Web Consortium . Archived from the original on 16 May 2022. Retrieved 13 October 2022.
  10. ↑ "Logo Alt Text". University of South Carolina . Archived from the original on 22 July 2022. Retrieved 15 October 2022.
  11. ↑ Montti, Roger (1 November 2022). "Google Explains Alt Text for Logos & Buttons". Search Engine Journal. Archived from the original on 3 November 2022. Retrieved 3 November 2022.
  12. ↑ Hofmann, Frank; Beckert, Axel (2021). "Text Art: Rendering images as text". Linux Magazine . Archived from the original on 15 October 2022. Retrieved 14 October 2022.
  13. ↑ "Lynx Users Guide v2.8.9". lynx.invisible-island.net. Archived from the original on 4 February 2019. Retrieved 15 October 2022.
  14. ↑ "Image ALT Text". Pennsylvania State University . 6 October 2014. Archived from the original on 12 October 2022. Retrieved 14 October 2022.
  15. ↑ "Google Images best practices". Google Developers . 20 September 2022. Archived from the original on 14 October 2022. Retrieved 14 October 2022.
  16. ↑ Southern, Matt G. (22 March 2022). "Google: Alt Text Only A Factor For Image Search". Search Engine Journal. Archived from the original on 22 April 2022. Retrieved 14 October 2022.
  17. ↑ "Embedded content – HTML 5". W3C. Archived from the original on 2 July 2017. Retrieved 29 June 2017.
  18. 1 2 Solovieva, Tatiana I.; Bock, Jeremy M. (2014). "Monitoring for Accessibility and University Websites: Meeting the Needs of People with Disabilities". Journal of Postsecondary Education and Disability. 27 (2): 113–127. Archived from the original on 14 October 2022. Retrieved 14 October 2022– via Education Resources Information Center.
  19. ↑ Curl, Angela L.; Bowers, Deborah D. (23 April 2009). "A Longitudinal Study of Website Accessibility: Have Social Work Education Websites Become More Accessible?" . Journal of Technology in Human Services. 27 (2): 93–105. doi:10.1080/15228830902749229. hdl: 2374.MIA/5279 . S2CID   143667951. Archived from the original on 14 October 2022. Retrieved 14 October 2022.
  20. ↑ Tait, Alex; Davis, Scott; Niyi-Awosusi, Olu; Wilhelm, Gary; Dixon, Carlie (30 November 2021). "Part II Chapter 9 – Accessibility". Web Almanac by HTTParchive.org. Retrieved 14 October 2022.
  21. ↑ White, Caroline (2 November 2000). "Battle to be equal". The Guardian . Archived from the original on 14 October 2022. Retrieved 14 October 2022– via Newspapers.com.
  22. ↑ Barkham, Patrick (30 August 2000). "Website 'discriminated against blind'". The Guardian . Archived from the original on 23 August 2016. Retrieved 14 October 2022.
  23. ↑ "Seventh Ministerial meeting of the Online Council – Media release". Australian Department of Broadband, Communications and the Digital Economy . 30 June 2000. Archived from the original on 20 June 2013. Retrieved 14 October 2022.
  24. ↑ Cohen, Alex H.; Fresneda, Jorge E.; Anderson, Rolph E. (September 2020). "What retailers need to understand about website inaccessibility and disabled consumers: Challenges and opportunities" . Journal of Consumer Affairs. 54 (3): 854–889. doi:10.1111/joca.12307. ISSN   0022-0078. S2CID   225771708.
  25. ↑ "Guidance on Web Accessibility and the ADA". ADA.gov. 18 March 2022. Archived from the original on 13 October 2022. Retrieved 14 October 2022.
  26. ↑ Daniels, Linda Markus (13 September 2006). "Websites for the Blind: Is This The Next 'Year 2000 Compliant' Requirement?". WRAL-TV. Archived from the original on 16 September 2008. Retrieved 14 October 2022.
  27. ↑ Frank, Jonathan (January 2008). "Web Accessibility for the Blind: Corporate Social Responsibility or Litigation Avoidance?" . Proceedings of the 41st Annual Hawaii International Conference on System Sciences (HICSS 2008). Waikoloa, HI: IEEE. p. 284. doi:10.1109/HICSS.2008.497. S2CID   16280255. Archived from the original on 8 March 2021. Retrieved 14 October 2022.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.