包括为每一个重要的alt文本图像

装饰图片

图片不需要理解或与内容被认为是装饰。装饰图片应该标记为装饰或屏幕阅读器将猜一个描述,通常大声说话有时繁琐的文件名就像“hero-image_293_version_953”。

看到W3的alt文本决策树帮助确定一幅图像是否装饰。

检查丢失的alt文本

Webflow的审计小组将突出显示所有图片没有alt文本。

了解如何添加alt文本的WebflowWebflow大学课alt属性。

如何写好alt文本吗

写好alt文本是一种艺术!确保每一个图像设置为装饰或alt文本基线,但也有一些微妙的注意事项在编写有效的上下文alt文本:

• 包括为每一个重要的alt文本图像上传,包括标识
• 避免重复的周围文本:如果适合图像的alt文本已经包含在周围的文本,图像标记为装饰
• 省去“形象”,“图片”或“标志”——屏幕阅读器已经这样说
• 保持简洁——150个字符是一个好的起点
• 对于复杂的图像,简要描述在alt文本,还包括一个更完整的文本描述页面上或者其他地方有关。
• 可操作的图片的alt文本,像图片链接、按钮、链接或图像映射区域,应该清楚地识别目的地或按钮的目的
• 环境问题:写一个简明的描述,电话重要的视觉特性,包括图像重要。
  

例子:上下文如何改变alt文本

根据图像提出了上下文,有许多不同的选择好alt文本。

示例1:

• 晚上周围文本:安全是一个关注图书馆的工作人员和顾客。明亮的通道可以是一个有吸引力的特性吸引顾客在整个晚上。

• Alt文本:现代玻璃、钢铁、砖和木头图书馆建筑与人造光闪亮的故事windows 1.5和现场灯光放置在一个木制建筑底。人行道上点燃。
  

示例2:

• 周围文本:XYZ库获得2011年银LEED认证。图书馆功能节能窗户和阴影。主入口的气闸也是一个有用的特性在波士顿气候全年。

• Alt文本:现代玻璃、钢铁、砖和木头图书馆建筑与双扇门气闸连接到一个房间,桌子和书架从外部可见。这个房间地板到天花板1.5故事windows长的阴影。
  

的例子http://www.ala.org/support/context-important-alt-text

例如:alt文本链接和按钮

在我们的博客,我们的标志是一个连接块,需要用户回到Webflow回家,所以适当的alt文本标志形象是“家”

有用的资源:

• Webflow审计小组
  

WCAG参考:

1.1.1非文本内容