使用 alt 属性为图片提供替代文本
图片是大多数网页的重要组成部分，当然也是低视力用户的一个特别难点。我们必须考虑图片在网页中扮演的角色，才能确定它应该具有哪种类型的替代文本。 请看这张图片。
<article>
<h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
<img src="imgs/160204193356-01-cat-500.jpg">
</article>
研究表明，10 只猫中有 9 只会在主人睡觉时默默地评判他们
在页面中，我们有一张猫的图片，用于说明一篇关于猫的众所周知的评判行为的文章。屏幕阅读器会使用此图片的字面名称 "/160204193356-01-cat-500.jpg" 读出此图片。这很准确，但毫无用处。
您可以使用 alt 属性为此图片提供有用的替代文本，例如“一只猫凶狠地盯着虚空”。
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
然后，屏幕阅读器可以读出图片的简明说明（显示在黑色的 VoiceOver 栏中），用户可以选择是否继续阅读文章。
关于alt的几点说明：
alt允许您指定一个简单的字符串，以便在图片不可用时（例如图片加载失败、被网络抓取漫游器访问或被屏幕阅读器遇到时）使用。alt与title或任何类型的图片说明不同，它仅在图片不可用时使用。
撰写实用的替代文本是一门艺术。为了使字符串成为可用的替代文本，它需要在相同的上下文中传达与图片相同的概念。
考虑在网页的页眉中添加一个链接的徽标图片，如上图所示。 我们可以将该图片准确地描述为“Funion 徽标”。
<img class="logo" src="logo.jpg" alt="The Funion logo">
您可能想为其提供更简单的替代文本，例如“首页”或“主页”，但这会给低视力和视力正常的用户带来不便。
但想象一下，如果屏幕阅读器用户想要在页面上找到页眉徽标，为其指定 alt 值“home”实际上会造成更令人困惑的体验。视力正常的用户和屏幕阅读器用户面临着同样的挑战，即弄清楚点击网站徽标会发生什么。
另一方面，描述图片并不总是很有用。例如，假设搜索按钮中有一个放大镜图片，按钮上带有文字“搜索”。如果文本不存在，您肯定会为该图片提供“搜索”的替代值。但由于我们有可见文本，屏幕阅读器会识别并大声朗读“搜索”一词；因此，图片上相同的 alt 值是多余的。
不过，我们知道，如果省略 alt 文本，我们可能会听到图片文件名，这既没有用，又可能会让人感到困惑。在这种情况下，您只需使用空的 alt 属性，屏幕阅读器就会完全跳过该图片。
<img src="magnifying-glass.jpg" alt="">
总而言之，所有图片都应具有 alt 属性，但并非所有图片都需要包含文本。重要图片应具有描述性替代文本，以简洁地描述图片内容，而装饰性图片应具有空的 alt 属性，即 alt=""。