在 alt 属性中具有不间断空格的屏幕阅读器答案

【问题标题】：Screen reader with a non breaking space in alt attrib在 alt 属性中具有不间断空格的屏幕阅读器
【发布时间】：2009-10-23 00:48:15
【问题描述】：

我正在为图像使用 CMS，除非提供 alt 文本，否则默认情况下不会在图像标签中生成 alt 属性。

我可以在alt标签中提供一个空格“”来生成：

<img src="../.." alt=" "/>

这会是屏幕阅读器和网络可访问性的问题吗？

【问题讨论】：

标签： xhtml accessibility

【解决方案1】：

HTML 作者可以通过三种方式在其图像上编写 ALT 文本：

没有给出 ALT 属性
具有不包含任何可读字符的 ALT 属性
具有可读取的 ALT 属性

这些以不同的方式处理。

如果图像缺少 ALT 属性，如下所示：

<img src="fruit.png" width="100" height="100" />

...默认的屏幕阅读器行为是大声朗读 SRC 属性。因此，假设此图像托管在 example.com 上的 images 文件夹中，屏幕阅读器会说：Graphic: h ttp://www.example.com/images/fruit.png。忽略 ALT 属性是不好的做法，因为盲人访问者最终不得不费力地阅读大量不相关的胡言乱语。

如果图像具有不包含任何可读信息的 ALT 属性，例如这两个中的任何一个：

<img src="fruit.png" width="100" height="100" alt="" />
<img src="fruit.png" width="100" height="100" alt=" " />

...默认行为是静默传递该图像。屏幕阅读器不能读出空格或空字符串；所以它什么也没说。这是压制纯装饰性图像发布的正确方法。但是请注意，最近的 WebAIM 屏幕阅读器使用调查发现 most blind users want to know an image is there even if it doesn't convey much to them。因此，请谨慎使用空替代文本来抑制图像；只有在图像传达的信息确实为零时才使用它。

最后，当然是常规替代文字：

<img src="fruit.png" width="100" height="100" alt="Photo of apples." />

在这种情况下，屏幕阅读器会显示“图形：苹果照片”。输入句点会使屏幕阅读器在 ALT 文本末尾暂停。

选择好的 ALT 文本很重要，而且可能很难。一般来说，如果您的图像包含文本图片，那么您应该在您的 ALT 文本中复制该文本（或其合适的缩写）。如果是说明性的或照片的，您的 ALT 文本应该是对照片内容的简明描述。如果它是像图表这样的复杂图像，那么您可能需要使用 ALT 文本将用户引导至页面其他位置的更完整描述。（LONGDESC 属性就是为此目的而设计的，但屏幕阅读器并未广泛支持。）

如果您的图片也是一个链接，那么拥有合理的 ALT 文本绝对至关重要；否则您的盲人访问者将不知道该链接的作用。

我建议使用屏幕阅读器（例如 NVDA，它是开源的）并使用它进行测试。这可能是——请原谅这个糟糕的双关语——让人大开眼界。

【讨论】：

【解决方案2】：

如果您不使用替代文本，则可以不使用 alt 属性。它不会验证，但不会改变任何事情，它的工作方式完全相同。你只是在取悦验证者。

使用空格不应该带来任何问题。

【讨论】：

【解决方案3】：

唯一的问题是客户希望网站声明它是 XHTML 兼容的 - 所以我们需要验证页面:(

【讨论】：