5
HTML 代码中图片的 alt 属性
source link: https://yihui.org/cn/2017/04/img-alt/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
HTML 代码中图片的 alt 属性
谢益辉 / 2017-04-02
审阅余博士的文章时，他问到 Markdown 的图片语法 ![]() 方括号中为啥要填文字。这是个很好的问题。要回答这个问题，必须理解 Markdown 语法和 HTML 语法的对应关系。虽然说 Markdown 语法简单，但如果完全不懂 HTML，那我觉得仍难以透彻理解 Markdown。
Markdown 语法  在转换 HTML 的过程中会被翻译为 HTML 图片标签 <img src="图片地址" alt="文字描述" />。这个 alt 属性的最大功效是为盲人或视力障碍的人提供一个文字描述，因为他们看不见图，只能靠屏幕阅读器读网页。如果图上没有 alt 属性，他们无法知道图是关于什么的，因为屏幕阅读工具只能把文字读给他们，无法把图的内容信息传递给他们。
alt 属性的次要功效是给搜索引擎提示。同样的道理，搜索引擎无法阅读位图信息，只能靠文字提示。当然，这话现在已经不完全对了，因为一方面图片有上下文的文字可以用来推断图片信息，另一方面随着深度学习技术的进步，位图里表达的信息也不是完全不能被机器理解出来。
所以方括号里要尽量添加文字描述，尽管视力正常的人在看网页时看不见这些文字；除非图片无法加载，这种情况下有些浏览器会显示 alt 文字1。
关于此事，其实我以前也没有特别注意过，直到 2014 年我在洛杉矶的 R 会议上真正碰到一个盲人 R 用户。
- 以前微软的 IE 浏览器会显示著名的红叉叉，现在不知道 IE 显示什么了。 ↩
← 从网址到网页（真相竟然是……） 读孟尝君传 →
Disqus
Utterances
Preferences
© Yihui Xie 2005 - 2020
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK