代码之家  ›  专栏  ›  技术社区  ›  Andrew Cetinic

在alt attrib中具有不间断空格的屏幕阅读器

  •  0
  • Andrew Cetinic  · 技术社区  · 15 年前

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

    我可以在alt标记中提供一个空空间“”,以生成:

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

    这会是屏幕阅读器和Web可访问性的问题吗?

    3 回复  |  直到 14 年前
        1
  •  1
  •   Esteban Küber    15 年前

    如果不使用alt文本,则可以不使用 alt 属性。它不会验证,但不会改变任何东西,它的工作原理完全相同。你只是取悦验证器。

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

        2
  •  2
  •   Will Martin    14 年前

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

    1. 没有给出alt属性
    2. 具有不包含任何可读字符的alt属性
    3. 具有可读取的alt属性

    这些是以不同的方式处理的。

    对于缺少alt属性的图像,如下所示:

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

    ……默认的屏幕阅读器行为是大声读取src属性。因此,假设此图像托管在 images 在example.com上,屏幕阅读器会说: 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 . 因此,要明智地抑制带有空alt文本的图像;只有当图像真正传递的信息为零时才使用它。

    最后,当然是常规的alt文本:

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

    在这种情况下,屏幕阅读器会说“图形:苹果的照片”。输入一个句号会使屏幕阅读器在alt文本的末尾暂停。

    选择好的alt文本很重要,而且很难。一般来说,如果您的图像包含文本的图片,那么您应该在alt文本中复制该文本(或其适当的缩写)。如果是说明性的或照片性的,您的alt文本应该是对照片内容的简明描述。如果它是一个像图表一样复杂的图像,那么,您可能需要使用alt文本来指导用户在页面的其他地方找到更完整的描述。(longdesc属性是为此而设计的,但屏幕阅读器并不广泛支持它。)

    如果您的图像也是一个链接,那么拥有明智的alt文本是绝对重要的;否则您的盲人访客将不知道链接的作用。

    我建议获取一个屏幕阅读器(如NVDA,它是开源的)并用它进行测试。这可能是——原谅这个坏双关语——让人大开眼界。

        3
  •  0
  •   user195023    15 年前

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