Alt决策树和替代文本指南

本页提供了如何正确使用网页内图片的替代文字的指引. 它使用来自 全决策树 W3C. 给Peter Hobley发邮件(phobley@hmc).如果你需要进一步的帮助.

Alt决策树

• 图像是否包含文本?
  • 是的:
    • 并且文本也以真实文本的形式出现在附近.
      使用空的 alt 属性. 看到 装饰图片.
    • 而文字只是为了视觉效果而显示.
      使用空的 alt 属性. 看到 装饰图片.
    • 文本具有特定的功能，例如图标.
      使用 alt 属性来传达图像的功能. 看到 函数图像.
    • …并且图像中的文本不存在.
      使用 alt 属性以包含图像的文本. 看到 文字图片.
  • No:
    • 继续.
• 图片是用于链接还是按钮, 是否很难或不可能理解链接或按钮的作用, 如果图像不在那里?
  • 是的:
    • 使用 alt 属性用于通信链接的目的地或所采取的操作. 看到 函数图像.
  • No:
    • 继续.
• 图片对当前页面或上下文有意义吗?
  • 是的:
    • 它是一个简单的图形或照片.
      使用图像的简短描述，以传达该含义的方式 alt 属性. 看到 的图片.
    • 它是一个图形或复杂的信息.
      将图像中包含的信息包含在页面的其他地方. 看到 复杂的图片.
    • …它显示的内容是多余的真实文本附近.
      使用空的 alt 属性. 见(冗余) 函数图像.
  • No:
    • 继续.
• 图像是纯粹的装饰还是不打算给用户看?
  • 是的:
    • 使用空的 alt 属性. 看到 装饰图片.
  • No:
    • 继续.
• 是上面没有列出图片的用途还是不清楚是什么 alt 提供文本?
  • 这个决策树并没有涵盖所有的情况. 请联系Peter Hobley phobley@hmc.以取得进一步的协助.

的图片

访问 W3C的信息图像教程 详细讨论. 它的内容总结如下，因为它适用于哈维马德网站.

信息性图像传达一个简单的概念或信息，可以用一个简短的短语或句子来表达. 替代文本应该传达视觉上显示的含义或内容, 这通常不是对图像的文字描述.

在某些情况下，可能需要详细的文字描述, 但只有当图像的内容是传达信息的全部或部分时. 将图像视为信息还是装饰是作者做出的判断, 根据在页面上包含图像的原因.

用于补充其他信息的图片

下图是希克森宫的维纳斯喷泉. 它补充了相邻的解释雕塑历史的文本. A short text alternative is sufficient to describe the information that is displayed visually but is not explained in the text; in this case, 文本替代是“维纳斯雕塑站在鱼塘中央的基座上。.”

   
   维纳斯喷泉是乔瓦尼·博洛尼亚学派(1524-1608)的作品。, 意大利文艺复兴时期最后一位伟大的雕塑家 ...

注意: 如果文字中有对希克森法院喷泉本身的描述,  图像可能被认为是多余的，因此具有装饰性. 由于文本中没有提到这一点，因此该图像被认为是有信息的.

图像传达简洁的信息

这张简单的照片说明了如何操作火警. 信息可以用简短的句子来描述, 因此，文本选项“推入皮瓣并拉下杠杆”在 alt 属性.

注1: 另一种技术是在主要内容中提供说明，而不是作为图像的文本替代. 这种技术使所有的信息都以文本形式提供给每个人，同时为喜欢直观地查看信息的人提供插图.

注2: 如果图像打算传达比图表更多的信息, 遵循复杂图像中描述的一种方法可能会更好. 例如, 如果这个图表出现在瓶子上或者瓶子的形状和大小是相关的信息, 使用更详细的替代文本.

传达印象或情感的图像

这张照片拍摄的是家庭周末的聚会. 它不是针对某一个人的，所以没有必要识别个人. 它被用来给人一种家庭周末促进互动的印象. 替代文本是“家庭周末让大家聚在一起。.这句话最好地描述了他们想要给人的印象.

装饰图片

访问 W3C的装饰图像教程 详细讨论. 它的内容总结如下，因为它适用于哈维马德网站.

装饰性图片不会给页面内容添加信息. E.g. the image’s information may be given in adjacent text; or the image’s purpose may be to make the page more visually attractive.

在这些情况下, 应该指示辅助技术通过使用null(空)来忽略图像。 alt 应提供文本(alt = " "). 为这些图像添加文本值会增加屏幕阅读器输出的声音混乱，或者如果主题与相邻文本中的主题不同，可能会分散用户的注意力.

作者必须根据在页面上包含图像的原因来判断是否将图像视为装饰. 图像可能是装饰性的，当它们是:

• 补充链接文本，以改善其外观或增加可点击区域;
• 说明邻近的文本，但不提供信息(“养眼”);
• 由周围的文本识别和描述.

控件的示例 alt 属性 when decorative images are provided using the element.

装饰图像作为文本链接的一部分

这个哈维马德校园的通用缩略图用于使链接更容易识别并增加可点击区域. 它不会添加到相邻链接文本(同一锚)中提供的信息。. 在本例中，使用null(空) alt 图像的值.

   
    Harvey Mudd’s Undergraduate 工程 Program Ranked No. 1 in U.S.

图像与相邻的文本替代

这是哈维马德校园的照片. 不需要重复此信息，并且可以为该图像使用null(空)alt值.

   
   Harvey Mudd的校园将几十年来的建筑与绿色空间和各种树木混合在一起.

用于营造氛围的图像(视觉效果)

此图像仅用于为页面添加氛围或视觉兴趣.

  

     Colleges across the country have seen an increase in applications, 导致许多人在录取过程中变得更加挑剔.

注意: 如果这张图片的目的是直接识别太阳2平台或传达其他信息(而不仅仅是为了改善页面的外观), 它可能应该被视为信息. 作者确定图像的使用目的.

函数图像

访问 W3C的功能性图像教程 详细讨论. 它的内容总结如下，因为它适用于哈维马德网站.

功能性图像引发行动，而不是传达信息. 它们用于按钮、链接和其他交互元素. 图片的备选文本应该传达将要启动的操作(图片的目的), 而不是对图像的描述.

单独用作链接徽标的图像

标志图像是通往学院主页的唯一链接内容. 它有“太阳2平台的家”的备选选项，以指示用户将被带到哪里.

链接文本中的标志图像

下面，学院的标志是用来补充文本在一个链接，导致主页. 该图像不代表不同的功能或传达其他信息，而不是已经在链接文本中提供, 因此应用了一个null(空)值, (alt = " "), 避免冗余和重复. 实际上，图像是链接文本的装饰性辅助或视觉提示:

  
   Harvey Mudd College 首页

图标、图像和按钮中使用的图像

内容编辑器通常不需要插入诸如打印机和搜索按钮之类的图标. 如果你认为你有一个需要这样做的用例，请联系Peter Hobley (phobley@hmc).Edu)获取进一步指导.

文字图片

通常不应在网页上使用文字图像. 如果你认为你有一个需要这样做的用例，请联系Peter Hobley (phobley@hmc).Edu)获取进一步指导.

复杂的图片

访问 W3C的复杂图像教程 详细讨论. 它的内容总结如下，因为它适用于哈维马德网站.

复杂的图像包含的信息比一个短句或句子所能传达的要多. 它们通常是:

• 图形和图表，包括流程图和组织结构图;
• 图表和插图，其中页面文本依赖于用户能够理解图像;
• 地图显示位置或其他信息，如天气系统.

在这种情况下，需要两部分案文替代:

1. 一个简短的描述来识别图像, 在适当的时候, 指出长描述的位置.
2. 长描述-图像所传达的基本信息的文本表示.

描述长描述的位置 alt 属性

虽然有许多技术可用, 中描述的位置是首选的方法 alt 图像属性.

 
  

Bagel Sales Full Text 访问ors Full Text
The chart shows average bagel sales by type for the first quarter in the Café. 而每个月的销售都相当稳定, 小麦蓝莓百吉饼, 墨西哥辣椒的产量显著增加，因为[...]