替代文本:并非总是需要 | CSS-Tricks

主要观点:

  • Alt 文本是与图像元素相关时会出现的内容之一,属性易自动生成。
  • 即使图像无需描述,也应使用空字符串的 Alt 文本,避免屏幕阅读器完全跳过图像。
  • 多数图像并非装饰性,应使用 Alt 文本描述,Emma Cionca 和 Tanner Kohler 研究了无需 Alt 文本的情况。
  • 用户从 Alt 文本中需要的是完成基本任务的便捷路径,如产品图像可帮助购买。
  • 应避免描述图像外观,而是思考图像的目的。
  • 可通过三个问题判断图像是否需要描述:是否重复、是否参考性、是否高效。

关键信息:

  • Alt 文本属性在工作时易自动生成,可用 Emmet 自动补全。
  • 空字符串的 Alt 文本会被屏幕阅读器跳过,可能导致信息遗漏。
  • 多数图像需用 Alt 文本描述,除了纯粹用于视觉享受的艺术品等情况。
  • 用户从图像中需要完成基本任务的路径,如产品图像可帮助了解产品。
  • 应避免描述图像外观,而是思考其目的,如屏幕阅读器会关注图像所传达的未在其他地方的信息。
  • 可通过三个问题判断图像是否需要描述:是否重复(内容已在其他地方描述)、是否参考性(页面内容直接提及)、是否高效(能否帮助完成任务)。

重要细节:

  • 如产品页面中,屏幕阅读器用户会通过跳跃页面标题了解结构,探索特定部分细节,遇到图像会思考其传达的信息。
  • 对于重复性图像,若内容已描述则可空 Alt 文本,如上方有描述图像的标题时。
  • 参考性图像若 Alt 文本为空,屏幕阅读器会跳过,但应让其知晓图像存在并简要描述。
  • 高效性指图像能否帮助完成任务,若内容已完成则可空或跳过 Alt 文本。
  • 文中有多个关于不同类型图像及 Alt 文本处理的示例,如植物种植图、餐桌布置图等。
阅读 13
0 条评论