alt屬性
| HTML |
|---|
| 比较 |
alt属性(英語:alt attribute)是在HTML和XHTML文档中使用的属性,用于为无法渲染的元素指定替代文本(alt text)。alt属性用于较简短的描述,较长的描述则使用longdesc屬性。尽管alt属性并不必须包含文字,但万维网標準組織万维网联盟(W3C)仍然建议通过HTML显示的每张图片都应具有alt属性。网页图片缺少合适的alt属性曾导致多起关于网站无障碍的诉讼。
alt属性可用于提升网站的无障碍性和易用性,包括对于依赖特殊软件浏览互联网的盲人用户。HTML中显示的图片使用alt属性是万维网联盟《Web内容无障碍指南》的一部分。螢幕閱讀器和文本浏览器会读取alt属性内容来代替图片。alt属性也可以在复制粘贴为文本时代替图片,还可以使图片更容易被机器读取,有利于搜尋引擎最佳化。
历史
1993年,HTML 1.2草案首次引入了alt属性,旨在支持文本浏览器。[1]在1999年发布的HTML 4.01中,alt属性成为img和area标签的必填属性[2],而在input标签和已弃用的applet标签中是可选的。[3]
Internet Explorer 7及更早版本会将alt属性渲染为提示框,这不符合万维网联盟的HTML标准。[4]这导致许多網頁開發者在希望用提示框展示图片的额外信息时,误用了alt属性,而正确做法应是使用title属性。[5][6]自2009年发布的Internet Explorer 8起,alt属性内容不再以提示框形式显示。[7]
用途


当图片无法加载时,alt属性中的文本用于替换图片,且不会改变页面原有的含义。[8]万维网联盟的《Web内容无障碍指南》规定,alt属性用于传达图片的含义和意图,而不是对图片本身的直接描述。[9]例如,某机构标志图片的alt属性应标明该图片为机构的标志,而非描述标志的细节。[10][11]alt属性用于提供图片简短、简洁的描述。更详细的描述可以通过longdesc屬性提供,该属性提供更详细的信息和补充,但不替代alt属性。[2]
Orca等屏幕阅读器会朗读替代文本。[12]Lynx等文本浏览器会显示替代文本而非图片(或者如果图片是可点击按钮,则显示value属性)。[13]图形浏览器通常只显示图片,只有在用户查看图片属性、关闭了图片显示功能或浏览器无法检索或解码图片时才会显示替代文本。[14]
在alt属性中加入描述有利于搜尋引擎最佳化,使得专门搜索图片的搜索引擎(如Google图片搜索)能够搜索和显示在搜索结果中网站使用的相关图片。[15]对于非图片搜索结果,搜索引擎会像读取页面普通文字一样读取alt属性内的文本。[16]
万维网联盟建议,不传递信息而是纯装饰性的图片应使用CSS而非HTML标记来实现;如果装饰性图片是通过HTML插入的,且不增加内容和提供额外信息,则建议包含一个空的alt属性,形式为alt=""。[17]这使屏幕阅读器或非图形浏览器的用户能跳过没有传达任何意义的图片,更易定位页面内容。如果没有提供alt属性,无法显示图片的浏览器不会忽略该图片,而是读取或显示URL或其他识别标记。[18]这造成了模糊,因为用户通常无法仅凭URL判断该图片究竟与文本相关,还是仅为网页的装饰性元素。[19]2021年Google Lighthouse的审计显示,27%的alt属性为空,尽管其中的大多数是具有信息的非装饰性图片。[20]
诉讼
已有许多关于网站无障碍以及alt属性缺失的诉讼。[18]马奎尔诉悉尼奥林匹克运动会组织委员会案是2000年的一起诉讼,澳大利亚的盲人布鲁斯·马奎尔(Bruce Maguire)起诉悉尼奥组委,原因是其网站www.olympics.com因图片缺少alt属性而导致他无法使用该网站。[21]澳大利亚人权委员会裁定,该网站因未使盲人能够顺利浏览,不符合无障碍标准而构成歧视。[22]诉讼期间,澳大利亚联邦、州和领地政府通过宽带、通信与数字经济部发布联合声明,表示他们将遵循万维网联盟对所有.gov.au网站的无障碍指南。[23]
在美国,曾有多起备受关注的诉讼涉及图片中缺少alt属性,指控相关网站违反了《美国残疾人法案》。[24]美国司法部以缺少alt属性作为网站无障碍性受损害的例子。[25]全国盲人联合会诉塔吉特百货案是2006年的一起集体诉讼,指控目標百貨的网站Target.com中的图片未使用alt属性,违反了《美国残疾人法案》。[26]这起诉讼在美国成为了网站满足无障碍标准和符合《美国残疾人法案》的法律先例。[27]
参考资料
- ^ Berners-Lee, Tim; Connolly, Daniel. Hypertext Markup Language (HTML) Internet Draft version 1.2. IETF IIIR Working Group. 1993-06 [2026-05-21]. (原始内容存档于2017-01-03).
- ^ 2.0 2.1 13 Objects, Images, and Applets. 万维网联盟. 1999-12-24 [2026-05-21]. (原始内容存档于2008-09-06).
- ^ Hazaël-Massieux, Dominique. Use the alt attribute to describe the function of each visual. 万维网联盟. 2002-11-20 [2026-05-21]. (原始内容存档于2022-03-20).
- ^ Why does not Mozilla display my alt tooltips?. MDN Web Docs. [2026-05-21]. (原始内容存档于2008-10-15).
- ^ Flavell, A.J. Use of ALT texts in IMGs. www.htmlhelp.com. [2026-05-21]. (原始内容存档于2022-01-08).
- ^ W3C HTML WG. 7.4.3 The title attribute. HTML 4.01规范. 万维网联盟. 1999-12-24 [2026-05-21]. (原始内容存档于2009-07-26).
- ^ What's New in Internet Explorer 8 – Accessibility and ARIA. MSDN. Microsoft. [2026-05-21]. (原始内容存档于2009-02-28).
- ^ HTMLImageElement.alt. Mozilla. [2026-05-21]. (原始内容存档于2022-08-22).
- ^ Using alt attributes on img elements. 万维网联盟. [2026-05-21]. (原始内容存档于2022-05-16).
- ^ Logo Alt Text. 南卡羅來納大學. [2026-05-21]. (原始内容存档于2022-07-22).
- ^ Montti, Roger. Google Explains Alt Text for Logos & Buttons. Search Engine Journal. 2022-11-01 [2026-05-21]. (原始内容存档于2022-11-03) (英语).
- ^ Hofmann, Frank; Beckert, Axel. Text Art: Rendering images as text. Linux Magazine. 2021 [2026-05-21]. (原始内容存档于2022-10-15).
- ^ Lynx Users Guide v2.8.9. lynx.invisible-island.net. [2026-05-21]. (原始内容存档于2019-02-04).
- ^ Image ALT Text. 宾夕法尼亚州立大学. 2014-10-06 [2026-05-21]. (原始内容存档于2022-10-12).
- ^ Google Images best practices. Google開發人員. 2022-09-20 [2026-05-21]. (原始内容存档于2022-10-14).
- ^ Southern, Matt G. Google: Alt Text Only A Factor For Image Search. Search Engine Journal. 2022-03-22 [2026-05-21]. (原始内容存档于2022-04-22).
- ^ Embedded content – HTML 5. W3C. [2026-05-21]. (原始内容存档于2017-07-02).
- ^ 18.0 18.1 Solovieva, Tatiana I.; Bock, Jeremy M. Monitoring for Accessibility and University Websites: Meeting the Needs of People with Disabilities. Journal of Postsecondary Education and Disability. 2014, 27 (2): 113–127 [2026-05-21]. (原始内容存档于2022-10-14) –通过Education Resources Information Center.
- ^ Curl, Angela L.; Bowers, Deborah D. A Longitudinal Study of Website Accessibility: Have Social Work Education Websites Become More Accessible?
. Journal of Technology in Human Services. 2009-04-23, 27 (2): 93–105 [2026-05-21]. S2CID 143667951. doi:10.1080/15228830902749229. hdl:2374.MIA/5279
. (原始内容存档于2022-10-14) (英语).
- ^ Tait, Alex; Davis, Scott; Niyi-Awosusi, Olu; Wilhelm, Gary; Dixon, Carlie. Part II Chapter 9 – Accessibility. Web Almanac by HTTParchive.org. 2021-11-30 [2026-05-21].
- ^ White, Caroline. Battle to be equal. 衛報. 2000-11-02 [2026-05-21]. (原始内容存档于2022-10-14) –通过Newspapers.com.
- ^ Barkham, Patrick. Website 'discriminated against blind'. 衛報. 2000-08-30 [2026-05-21]. (原始内容存档于2016-08-23).
- ^ Seventh Ministerial meeting of the Online Council – Media release. 宽带、通信与数字经济部. 2000-06-30 [2026-05-21]. (原始内容存档于2013-06-20).
- ^ Cohen, Alex H.; Fresneda, Jorge E.; Anderson, Rolph E. What retailers need to understand about website inaccessibility and disabled consumers: Challenges and opportunities
. Journal of Consumer Affairs. September 2020, 54 (3): 854–889. ISSN 0022-0078. S2CID 225771708. doi:10.1111/joca.12307 (英语).
- ^ Guidance on Web Accessibility and the ADA. ADA.gov. 2022-03-18 [2026-05-21]. (原始内容存档于2022-10-13).
- ^ Daniels, Linda Markus. Websites for the Blind: Is This The Next 'Year 2000 Compliant' Requirement?. WRAL-TV. 2006-09-13 [2026-05-21]. (原始内容存档于2008-09-16).
- ^ Frank, Jonathan. 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. January 2008: 284. S2CID 16280255. doi:10.1109/HICSS.2008.497.
外部链接
- Alternative Text——图片替代文本的用法,出自WebAIM
- MINI FAQ ABOUT THE ALTERNATE TEXT OF IMAGES(页面存档备份,存于互联网档案馆)——关于图片替代文本的迷你常见问题集,伊恩·希克森編