【问题标题】:Image alt attribute best practices图片 alt 属性最佳实践
【发布时间】:2016-01-04 01:49:29
【问题描述】:

<img> 标签上的alt 属性的具体用途是什么?

它应该描述图像,还是应该为屏幕阅读器(以及关闭图像的人)提供有意义的替换文本?

例如,如果我在我的网站上有一个人的简短传记,并附上一张他们的小照片,那么让视障用户向他们朗读“约翰·史密斯的照片”真的有意义吗?

【问题讨论】:

    标签: html accessibility


    【解决方案1】:

    HTML 5 规范对此有一个huge section

    基本上,如果您根本没有使用图像,alt 属性应该是文本。如果您的图像纯粹是装饰性的,您可以使用alt=""title 属性中有描述。

    【讨论】:

    • 是的,您不应该在装饰图像上使用 alt 属性,但是知道有一张约翰·史密斯的盲人照片有什么价值?除非你要深入描述他的特征,否则这似乎有点毫无意义。
    • 他们也提到了这一点——如果你真的不能提供任何有用的替代文本,或者如果页面文本足够好而没有意义,那么完全省略该属性。
    • 不要完全省略该属性。将其保留为 alt="" 否则某些屏幕阅读器会将其读取为 "graphic "
    • @Kai 实际上,当 alt 属性为空字符串时,一些屏幕阅读器仍然会读取文件名;最好使用一个空格,即alt=" "
    • WHATWG 规范实际上是一个非常有趣的阅读 - 最让我惊讶的是它实际上建议保留 alt 属性但为空的次数!
    【解决方案2】:

    我认为这个想法是使用替代文本来传达与图像相同的信息。这取决于图像是什么。

    导航元素的功能(“下一页”、“返回”)可能比它们的外观(“右箭头”)更好地描述。

    John Smith 的照片可能会替换为 John Smith 的描述,或对正在发生的事件的描述等。

    【讨论】:

      【解决方案3】:

      来自w3.org

      虽然替代文本可能非常有用,但必须小心处理。作者应遵守以下准则:

      • 在包含用于格式化页面的图像时,不要指定不相关的替代文本,例如,alt="red ball" 不适用于添加红球来装饰标题或段落的图像。在这种情况下,替代文本应该是空字符串 ("")。在任何情况下都建议作者避免使用图像来格式化页面;应改为使用样式表。
      • 不要指定无意义的替代文本(例如,“虚拟文本”)。这不仅会让用户感到沮丧,还会降低必须将文本转换为语音或盲文输出的用户代理的速度。

      【讨论】:

        【解决方案4】:

        如果由于某种原因无法加载图像,它会提供“替代”文本。在您的示例中,我会说是的,这将是合适的。

        【讨论】:

          【解决方案5】:

          “alt”属性是图像语义的替代(文本)表示。这不仅用于无法加载的图像:它还用于屏幕阅读器或纯文本浏览器。

          在您的特定情况下,包括替代文本类型取决于您是否认为注意页面是否包含此人的图片很重要。如果它是纯粹的视觉项目,您可能不需要任何替代文本。如果它也被用作某种链接,您可能确实需要一些替代文本,以便使用屏幕阅读器的人知道链接后可能会做什么。

          【讨论】:

            【解决方案6】:

            第一次在谷歌上点击 [img alt 可访问性] 给出了 考虑当图像未显示时页面的外观或声音。然后,为每张图片写一个最适合替换的 alt 文本 (Guidelines on alt texts in img elements)

            【讨论】:

              【解决方案7】:

              如果图像没有显示,它应该是对用户有帮助的任何东西。

              顺便说一句,当您将鼠标悬停在 IE 中的图像上并且工具提示显示 ALT 不是 ALT 的正确行为时的“功能”。标题应该用于此。

              【讨论】:

              • IE 仅在 TITLE 文本不可用时显示 ALT 文本。这只是 TITLE 的一种可能用法。
              【解决方案8】:

              简洁地描述图像,就好像你在和一个盲人说话一样。很简单。

              我确定 Google 使用此属性值来索引图像搜索。

              【讨论】:

                【解决方案9】:

                如果我有一个简短的传记 我网站上的人,并包括一个 他们的小合照,真的吗 对视障用户有意义 让“约翰史密斯的照片”读出 给他们?

                如果您没有替代文字,您认为他们会假设图片是什么? “约翰史密斯和他妻子的照片”? “约翰史密斯接受奥斯卡奖的照片”? “约翰史密斯刺杀肯尼迪的照片”? “约翰·史密斯被他的宠物大象谋杀后躺在露台上的照片”?

                如果是约翰·史密斯的照片,是的,请说出来。如果是其他事情,请说出来。

                【讨论】:

                • 伙计,那个约翰·史密斯的家伙有一些伟大的冒险经历。我提到的另一种选择是使用 alt="" 来处理不包括奥斯卡奖或杀人厚皮动物的照片。
                【解决方案10】:

                Alt 属性与 img 标签一起使用。

                Alt 表示替代

                用于图片的简短描述。

                在浏览器无法加载图片

                时显示在屏幕上

                Click to Know more

                【讨论】:

                • 请说明该链接将如何帮助解决问题。
                • 请解释一下你的答案。
                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 2011-12-27
                • 1970-01-01
                • 2020-10-01
                • 2015-09-25
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多