查看alt属性的正确用法

到目前为止，大多数网页设计行业都知道易访问性的重要性。我们不停地谈论它，恳求我们的客户认真对待它。它对网络和用户的影响是不可否认的。

但有时细节会在混乱中丢失，例如，我们经常听到"在图像上使用替代文本！"这样一个善意的好建议。不过，它也有点模糊。

虽然知道alt属性在可访问性方面是有益的，但是我们真正需要的是上下文。正确的使用方法是什么？有些时候我们不应该使用它们？

这些问题的灵感来自于我与一些设计师和开发人员在Twitter上的对话，它让我意识到，我并不是唯一一个有时会为如何建立对用户有利的网站而苦苦挣扎的人。

今天，我们将尝试阐明这个重要属性的正确用法！

意象的角色变化

这些年来，网页设计师利用图片的方式已经发生了很大的变化。在网络的早期，图像的使用方式是我们现在可能想不到的。我们将它们作为页面标题、导航系统甚至整个充满内容的页面来使用。

对于依赖屏幕阅读器或其他辅助技术的用户，这可能会导致页面无法使用。在大量内容显示为图像的情况下，即使简单的alt属性也没有多大帮助。

值得庆幸的是，我们已经吸取了一些重要的教训。网络排版的爆炸式发展已经消除了过去任何与设计相关的误用图片的理由。随着可访问性的出现，许多人现在意识到图像有特定的作用。

替代文字的重要性

合理地使用图像应该会带来更好的可访问性，虽然这在一定程度上是正确的，但我们仍然有能力把事情搞糟。这就是替代文本可以发挥作用的地方——如果使用正确的话。

记住只使用alt属性并不一定会给用户带来很多好处，例如，假设我们有一个标题标签，上面写着"关于我们"。下面是公司员工的合影。如果我们简单地将alt属性设置为alt= " About Us "，那么当辅助技术读取它时，它就变得多余了。因此，它并不真正告诉用户图像是什么或它意味着什么。

那么，我们应该用什么来代替呢？这在很大程度上取决于页面本身的内容和图像在其中的作用。然而，这又带来了另一个潜在的问题。

值得庆幸的是，W3C有一个有用的指南，将图像分解为不同的概念：

内容丰富

装饰性

功能性

文字图片

复杂

图片组

影像图

该指南提供了每个概念的简要说明，以及可以帮助您确定提供替代文本的最相关路径的示例。如果您仍然不确定，请查看alt决策树以获得更多指导。

并非总是必要的吗？

W3C指南中最有趣的信息之一是，并非所有图像都需要alt属性。

但是，等一下。那些每次都要使用alt的调用呢？我们不是忽略了可访问性吗？

结果是，对于装饰性图像（不向页面添加任何信息），alt属性就变得没有必要了。在这种情况下，提供替代文本会"给屏幕阅读器输出增加杂音"。因此，就像缺少空白会导致视觉页面布局混乱一样，对于依赖这些工具的人来说，这些额外的文本也会造成同样的结果。

让web设计人员感到困难的是自动化的可访问性工具，比如WAVE标记图像，当他们阅读一个页面时，没有替代文本。甚至谷歌也会向你发送烦人的电子邮件，抱怨某个特定的图像在他们的视图中无法访问。这迫使我们填写属性，只是为了通过自动化测试。

因此，我们有责任对这些结果持保留态度，并在必要时向客户解释情况。在特定情况下，空的alt属性可能是有益的。

关于帮助用户

在做了一些关于如何使用alt属性的研究之后，我意识到我经常使用错误的方法。我怀疑很多设计师也这么做过。

在某种程度上，这是可以理解的。这个属性虽然已经存在了很长时间，但并不令人兴奋。它是功利主义的，并不总是在我们的脑海中。

然而，对于许多用户来说，这是至关重要的。考虑到不是每个人都能轻易看到我们整合到页面中的图像。对于这些人来说，alt属性的作用是帮助将上下文带到他们正在消费的内容中。

当我们构建一个日益复杂的网络时，这是需要记住的。