跳到主要内容

编写Alt文本,就像您正在与之交谈一个朋友

斯科特·范德西

2024年4月22日出版

话题
蝙蝠侠大笑着,向戈登专员描述了他看到的一个迷因,戈登专员看起来很不安。

如果你没有从这篇文章中拿走任何东西,我希望你记住:写替代文本,就像你在向朋友描述图像一样。

我发现人们常常过于专注于替代文本的“规则”。当然,有很多事情需要注意,但几乎所有这些都包含在这个简单的指南中。如果你在电话里和朋友聊天*,想描述一下你看到的模因,你可能会说“有一只狗戴着安全眼镜,被化学设备包围,说‘我不知道我在做什么’。”

保持简短,但信息丰富!给出最重要的信息,忽略不重要的细节。

*我知道,我知道,实际上没有人会谈再打电话了。如果这个想法让你感到紧张,你可以用“在电话里描述一个迷因”来代替“当你逃离最近一次抢劫的现场时,向你的逃亡司机描述了一个迷因,这名侦探自从在那不勒斯工作以来一直紧跟在你后面,所以可以理解,她压力很大,不想在开车时在你的手机上看一张有趣的狗照片。”

当然,上下文决定了您的描述。如果我向化学专业的学生描述化学狗的表情包,我可能想强调这只狗做错了什么。如果我向一个在危险泄漏应对小组工作的人描述这件事,我可能会提到这只狗正在把一种神秘的液体倒进咖啡杯。举个例子,让我们考虑一下蝙蝠侠电影中的这张图片。

克里斯托弗·诺兰(Christopher Nolan)执导的蝙蝠侠电影中,戈登专员站在屋顶准备点燃蝙蝠信号的画面。

一个粉丝运行的蝙蝠侠维基(Batman wiki),观众可能对这些角色很熟悉,可以将其用作替代文本:

戈登专员穿着他标志性的风衣,站在蝙蝠信号附近,考虑是否点燃它,提醒蝙蝠侠。

相比之下,一篇关于电影摄影的文章可能会突出图像的其他特征,作者选择这幅图像作为框架技术的示例,而蝙蝠侠并不是主要焦点。

在这张照片中,导演克里斯托弗·诺兰(Christopher Nolan)陷害了加里·奥尔德曼(Gary Oldman)饰演的戈登专员(Commission Gordon),他从未点亮的蝙蝠信号灯旁凝视天空,身后的城市清晰可见,提醒观众他决定召唤蝙蝠侠的内在利害关系。

如果蝙蝠侠有一个社交媒体账户,他可能会采取稍微不同的方式。

戈登看起来很傻,我在他再次说话的时候把手伸出来,哈哈

所有这些都是特定语境下观众的有效替代文本选择。

大多数屏幕阅读器在阅读备选文本之前会说“image”或“graphic”,因此以“image of X”开头是多余的。你唯一需要提到图像本身的时候是媒体是否重要,比如艺术品和图表。例如,“一只可爱小猫的木炭素描”、“我们要抢劫的豪宅的蓝图”或“三年内销售额下降50%的图表”

埃里克·贝利提醒我们在备选文本中添加标点符号如果你的选择只是一个句子,那么加标点符号可能会让人感到奇怪。但请记住,它不会被孤立地阅读,它将与周围的文本一起阅读。用适当的句点或其他标点符号结束句子,可以让屏幕阅读器了解如何从备选文本转换为以下文本。

有时!就像所有事情一样,它是上下文相关的。我强烈建议阅读“在可选文本属性中描述种族的情况Tolu Adegbite,以及关于肤色和文字描述的思考”莱昂妮·沃森著。他们都指出,如果不提及种族,我们可能无意中强化了这样一种观点,即隐性违约是白色的。

就像我们鼓励在个人资料中使用性别代词一样,即使是对顺性别的人来说也是如此。这与是否有人会混淆你的代词无关。这是关于规范每个人都有代词的想法,他们可能不符合你的期望。

诚然,纯粹的装饰性图像可以使用空字符串中高音属性。然而,正如Eric Bailey所指出的,你的形象可能没有装饰性简而言之,术语“装饰性”是指图像不能以视觉传达信息,并不是说它被用作装饰。

间隔GIF是装饰性的。图像边框具有装饰性。仅包含图标图像的按钮是装饰性的。这张我们将在大厦内破解的保险箱的照片是装饰性的。公司的标志是装饰性的。

这是一个棘手的案件。如果一个人的照片显示在他的名字旁边,而可选文本只包含他的名字,那么屏幕阅读器会听到这个人的名字两次,这不会增加任何值。例如,在这个页面的顶部,你可以在我的名字旁边看到我的头像。我们选择离开中高音头像上的属性为空,因为我们不希望屏幕阅读器用户听到“Image,Scott Vandehey,Link,Scott Vandehey”

但是……事情并没有那么简单。这取决于图像显示的内容。在“写很棒的alt文本:情感很重要,“Jake Archibald提出了这样的理由,他在一个会议网站上的头像照片显示他躲在一个植物后面,实际上包含了以下信息:应该选择了“杰克·阿奇博尔德躲在植物后面”

像往常一样,上下文很重要,如果有疑问,请尝试联系辅助技术的真实用户征求意见。

我知道我一开始说你只需要记住一条准则,然后给了你七条。但我坚持我所说的。不要强调精心设计完美的备选文本。只要用你描述照片的方式写出来,照片上是你刚刚从昌特伯里公爵那里偷来的一袋闪闪发光的钻石,当你沿着海岸行驶时,终于摇过了侦探,风吹过了你的头发,你逃跑的司机还在为你之前向她描述的那只狗做化学表情包而大笑。

评论

马丁说:

Alt text是对图像的描述。它主要是为那些看不到它的人设计的,无论他们是否有视觉障碍,图像没有加载等等。所以它不应该包含图片中没有的信息。

在你的第二个例子中,“在这张照片中,导演克里斯托弗·诺兰(Christopher Nolan)装裱了……”或“……提醒观众他决定召唤蝙蝠侠的内在利害关系。”不是视觉传达的信息,因此它们不属于备选文本。省略这些部分也会使alt文本更短,这更可取,请参阅https://adrianroseli.com/2024/04/long alt.html

在第三个例子中也是一样的:“当他再次说话时,我把手伸出来,LOL”并不是对图像中信息的描述。

我喜欢“像和朋友聊天一样写Alt文本”的建议,但我认为你的例子可能会让人们忽略Alt文本描述了要查看的内容这一点。

回复Martin

请友善、礼貌、富有建设性。您可以使用简单的HTML或降价在您的评论中。所有字段都是必需的。

迈克尔·D·贝克瓦尔说:

我认出了蝙蝠信号,但没有认出那个演员,我肯定不知道那是哪部蝙蝠侠电影。有时,即使是一个能看到图像的人也无法获得信息。这可能是一个可以帮助每个人理解图像的标题会派上用场的地方。

留下评论

请友善、礼貌、富有建设性。您可以使用简单的HTML或降价在您的评论中。所有字段都是必需的。