无障碍 图像的辅助描述文本
为什么
从上一页，您了解到有意义的图像需要描述性文本。在本页中，您将了解写什么。图像的替代文本适用于由于某些原因无法查看图像的用户。原因可能是连接缓慢、图像文件错误，或者用户使用屏幕阅读器。
什么
alt 属性的值应描述图像，或者更好的是图像的意图。
如何
您将学习如何为非交互式图像、独立图标和徽标添加描述性文本。
非交互式图像
假设您要通过电话与朋友解释网页，您会如何描述图像？这是一种编写描述性图像文本的好方法。
编辑图像
在此 Medium 文章的屏幕截图中，有一张 Google 联合创始人谢尔盖·布林从直升机上跳伞的图片。此图像的描述性文本可能是
"谢尔盖·布林从直升机上跳伞"
产品图片
第一张产品图片显示了一袋咖啡。放大后，图像中有很多有趣的细节，例如品牌名称、重量和背面的可持续发展徽章。
此图像的适当替代文本为
"Dr. Nam 整豆咖啡。中度烘焙。500 克。UTZ 认证"
第二张产品图片显示了一件夹克。尝试进行如下简短描述
"Kicker Sports 男士夹克。全拉链。灰色袖子。正面黑白图案。两侧有两个带纽扣的口袋。"
背景图像
背景图像通常没有意义。它们可以用来营造氛围。有时它们传达的信息不仅仅是氛围。让我们尝试为图像试图告诉我们的内容添加替代文本。
此 Caledon Build 的示例具有房屋的背景图像。不是普通的房子，而是这家公司建造的现代化房屋。文本构建更高水平没有告诉用户他们建造的是哪种特定类型的房屋。此图像的描述应类似于
私人住宅，现代建筑，线条简洁。极简主义，带有一个大车库
独立图标
描述图标的功能，而不是外观。
Medium 上的文章在主标题下方有四个独立的图标。我们不应该描述图标的外观，例如“Twitter 徽标”，而应该写出图标做什么
- "在 Twitter 上分享"
- "在 LinkedIn 上分享"
- "在 Facebook 上分享"
- "在 Medium 上收藏"
徽章
前面的示例有一个显示小星星的图标。该图标是非交互式的，它不执行任何操作。它意味着某些东西。它表示合作伙伴故事，仅供订阅会员阅读。像“黑色星星”这样的文本描述毫无意义。相反，写出含义
"合作伙伴故事"
咖啡产品有两个徽章。对于这些，我们必须添加代表其含义的文本。第一个写着1 YR。在这种情况下，这意味着供应商已成为付费供应商会员一年。第二个徽章是两个黄色方块的插图。此图标用于拥有高级会员资格的金牌供应商。这些徽章应具有如下替代文本
"付费供应商一年"
"金牌供应商"
徽标
描述徽标的意图。
在此 Medium 文章的屏幕截图中，我们有两个徽标。首先是 Medium 的主徽标。其次是此频道 Business Insider 的徽标。添加“Medium”和“Business Insider”作为描述性文本是不够的。用户可能不知道该徽标是否链接到 Business Insider 的网站或 Business Insider 的 Medium 频道。在这种情况下，是后者，我们可以编写以下描述
- "Medium 首页"
- "Medium 上的 Business Insider"
