我确定您了解alt
文字。 图像标签上的属性的主要任务是为由于某种原因而看不到图像的人描述该图像的含义。 请使用它们。
我不想淡化“ 请使用它们”消息,但是最近在我的日常工作中出现了一些与替代文本有关的有趣事情。
当你不
Hidde de Vries写道您最近并不总是需要替代文本 :
但是,当图标旁边有一个单词(例如“注销”)时,该图标本身就是装饰性的,不需要替代文本:
<button type="button"><img src="close.svg" alt="" /> Close</button>
在这种情况下,我们可以将alt属性保留为空,否则屏幕阅读器会宣布“按钮-关闭关闭”。
我想在一个完美的世界中,因为该图标是完全可装饰的,因此通过CSS进行应用将是理想的选择,但重点是:如果您必须使用图像,则alt
文本的弊大于利。
我们可以免费获得吗?
这些天计算机很漂亮 。 也许他们可以查看我们的图像并提供描述,而无需我们手动键入。
think我认为我使用机器学习对人很好! 在这一概念验证中,我将使用Azure的Computer Vision API为屏幕阅读器创建动态的替代文本。 ???? https://t.co/Y21AHbRT4Y pic.twitter.com/KDfPZ4Sue0
— Sarah Drasner(@sarah_edo) ,2017年11月13日
Sarah的演示使用Computer Vision API来完成该任务。
那么figcaption呢?
我讨厌这样说,但是我不太擅长在CSS-Tricks上的博客文章中为图像编写替代文本描述。 这是我们需要通过流程更改来解决的问题。 我们确实经常使用<figcaption>
来添加与图像有关的文本。 的方式,文本通常制作像替代文字给我的感觉 。 它描述了图像中发生了什么。
我当时在问这个问题,而Zell Liew告诉我他做了同样的事情:
我实际上有同样的问题。 我大部分的说明文字都是用来描述图像的,因此读者可以理解图像的含义。
在我看来,我认为将确切的副本从figcaption中放到alt文本中会变得更糟,因为正在阅读alt文本的人本质上会两次读取相同的描述。
我还和有一个有趣想法的埃里克·贝利(Eric Bailey)进行了交谈。
<figure> <img src="screenshot.png" alt="Screenshot of Chrome displaying a split view. On the left is a page full of image thumbnails comparing pre and post-optimization filesize. On the right is Chrome developer tools showing paint rasterize duration for the images. With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds."> <figcaption aria-hidden="true"> With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds. </figcaption> </figure>
这个:
- 保留人物造型
- 避免使alt无效,这对于某些屏幕阅读器可能会产生问题
- 使描述与内容保持紧密联系,并与SR用户进行交流
- 与视觉阅读器交流重要内容,而无需为SR用户复制阅读内容
- 使用旨在用于表格之外的aria属性
我要强调一点,他认为这只是一个主意,并且尚未得到较大的可访问性社区的严格审查。 如果你们当中有人在读书,您怎么看?
Eric的演示使用了比figcaption更详细的替代文本,但是即使它们相同,似乎该模式也很好。
小提醒:Twitter具有替代文本
但是您需要启用该功能。