数码相机的彩色绘图,背面有一些照片,表示需要alt文本的图像。
指南

如何为视障人士编写Alt文本和图像描述

让失明和视力低下的人可以访问您的网站和社交媒体。

2023年7月全面更新;原2018年1月后

在过去的几年里,我已经成为了一名顶尖的专家,学会了如何为视障人士(包括盲人/低视力观众)编写alt文本和图像描述。只有不到1%的在线图像包含针对失明者的alt文本或图像描述,这意味着使用屏幕阅读器的人无法访问图像和其他可视内容,无法将其与信息联系起来并促进交流,因此,添加alt文本和/或图像描述是一种很好的方式,可以脱颖而出并包容视力下降的观众,同时可以改进图像的搜索引擎优化(SEO),使其更容易理解发生了什么。以下是我关于如何为视障人士编写alt文本或图像描述的一般提示,自从我在2018年首次发布这篇文章以来,它一直在更新。

什么是alt文本?什么是图像描述?

Alt text和image descriptions是基于文本的图像视觉细节描述,主要针对视力受损(包括失明/低视力)的人编写。如果图片无法加载到网站上,将在其位置显示alt文本,alt文本也用于搜索引擎优化。

图像描述与屏幕阅读器用于识别图像的alt文本描述类似,尽管alt文本和图像描述之间有一些关键区别:

位置

Alt文本通常附加到图像元数据或添加到社交媒体上的“Alt文本”框中。图像描述可以在图像标题、文本帖子中,也可以在扩展描述的文本链接中共享。

可见性

Alt文本通常只对屏幕阅读器可见,这些阅读器会大声读出Alt文本或将其显示在盲文显示器上。图像描述是“公开的”,任何人都可以阅读。推特是一个社交媒体平台,它允许用户通过选择包含alt文本的图像或gif上的alt按钮来阅读alt文本,无论他们是否有屏幕阅读器。

文本的长度

一张图片胜过千言万语,但可能只有一千个字符的空间!Alt文本通常限制为100-250个字符,但大多数最佳实践指南建议将Alt文本保持在125个字符左右。图像描述可以是相同的长度,甚至更长,因为它们包含在照片标题、文本帖子或文本链接中。我通常建议人们将基本描述保持在280个字符左右,或推特帖子的长度。

以下是流行社交媒体平台上的alt文本政策,摘自我在《如何在社交媒体上添加alt文本》(How To Add alt text on social media)上的帖子。

详细程度

由于字符限制较大,图像描述往往比alt文本更深入地描述视觉细节。例如,alt文本可能会告诉用户地板上有一个水坑,但图像描述可能会更详细地说明,并说白色瓷砖的厨房地板上有橙汁水坑。

相关链接

什么是屏幕阅读器?

屏幕阅读器,有时也称为文本到语音,是一种辅助技术,允许盲人/弱视者阅读数字信息。如果图像没有alt文本,屏幕阅读器很可能会忽略它,从而使用户很难或不可能知道图像中的内容。

一些用户不全职使用屏幕阅读器,而是使用通过手势、快捷方式或按下手机上的按钮激活的“按需”屏幕阅读机。这些工具可能被称为选择朗读、大声朗读、朗读文本或类似工具,仅用于阅读文本或其他文本。这就是我作为低视力用户使用屏幕阅读器工具的方式——我在设备上需要时启用它们。

访问屏幕阅读器输出的另一个选项是将设备连接到可刷新的布莱叶盲文显示器,该显示器将以布莱叶盲字显示alt文本、表情符号名称和其他基于文本的内容。可刷新的盲文显示屏大小不一,尽管最常见的型号一次显示40个字符,有些显示屏最多支持70或80个字符。

相关链接

自动替换文本怎么样?

自动转换文本是一项很棒的技术,可以提供文本的转录和图像的基本细节,但应该更多地用作起点,而不是作为完成的描述,由于算法还远远不够完善,我经常使用的一个例子是,自动alt文本将我哥哥站在车道上的照片识别为汽车照片,也曾将我在动物园看到的一群大象识别为一群大猩猩。尽管如此,还是有一些应用程序可以帮助用户识别图像中的内容,并以此作为编写描述的起点——我最喜欢的应用程序之一是微软的“看人工智能”和谷歌镜头。

相关链接

为视障人士编写alt文本和图像描述时应包括哪些内容

alt文本和图像描述的目标是描述所有相关和重要的视觉信息,以理解图像。虽然这些信息可能与每种类型的图像都不相关,但以下是我在编写alt文本或图像描述时包含的细节示例。

图像类型

我在看动画片吗?条形图?一张照片?当我以非视觉方式滚动标记的帖子列表时,了解我正在查看的内容类型可能会有所帮助。对于纯文本截图的帖子,一些人会在编写其余文本之前编写“抄本”。

文本

所有文本都应该一字不差地写下来,当涉及到为alt文本和图像描述转录文本时。从图像中快速转录文本的一种方法是使用Android和iOS中的“复制文本”功能,这可以通过长按图像并突出显示文本,或者选择“从图像中复制文本”并将文本粘贴到alt文本/图像描述文本框中来完成。不过,这并不完美,因此用户仍然需要校对并确保文本间距正确。

谁在图片中

当我在自己的社交媒体上发帖或与非公开观众一起创建内容时,我会提到照片中包含的人的名字,而不是描述他们的长相。

如果是一个拥有自己维基百科页面的人,可以只在描述的开头写下此人的名字,而不提供任何额外的描述性信息,除非他们的外表完全不同。例如,一些名人在Met Gala上染头发,所以提到这种外表上的变化是有意义的,例如“Cara Delevigne戴着灰色的短假发”。如果我正在为自己的社交媒体帖子写其他文字,我只会写我的名字,除非我的外表看起来与预期不同,例如,如果我没有戴眼镜,或者我化妆后改变了我的外表。

在模型未知或名称不可用的情况下,我建议提供种族/民族、性别、头发颜色和可选的年龄/年龄范围等信息。包括关于他们的体型/身材的信息也很有帮助,尽管我不会提及具体的服装尺寸,除非是与服装尺寸相关的产品列表。

当涉及到动物时,我会写下物种名称或品种名称,例如水豚或水豚。我不描述动物长什么样,因为人们可能有自己的牛长什么样的心理模型,或者他们可以自己查找描述。

图像的设置

这张照片是在哪里拍的?它在厨房里吗?一条被抗议者包围的繁忙街道?音乐会?总统图书馆?主体是否站在某物前面?了解图像的设置有助于为正在发生的事情提供额外的上下文。

如果我正在为我没有拍摄的照片写其他文字或图像描述,我不会写位置信息,除非它是由原始海报提供的,或者位于非常容易识别的区域,例如自由女神像。如果我认识一个地点,但这个地点并不广为人知,我会避免包含位置信息,以避免无意中暴露该人的位置。例如,我不会写下我朋友拍自拍的当地咖啡馆的名称,除非他们自己标记了位置或站在标志下面。

颜色

描述颜色时,请使用诸如钴蓝、长春花、紫红色、石灰绿、金属金或类似名称的阴影名称,无需描述红色的外观,但阴影名称有助于提供更深入的信息。然而,如果颜色不是主要焦点,则无需为图像中的每种颜色指定阴影名称。例如,如果我正在为最近一次杂货店购物时买的东西写alt文本,我可能会提到绿色香蕉或黄色甜椒,但不会深入讨论这些颜色的鲜艳程度。

如果一个图案中有多种颜色,首先要提到底色,然后再提到图案元素的颜色——例如,今天我穿着一件带有白色条纹的复古紫色连衣裙(复古紫色是色调名称)。

表达和情绪

照片中的被摄对象看起来怎么样?他们有中性的表情吗?他们在笑吗?或者,当他们意识到自己刚刚向空中扔了一堆树叶,里面还有狗屎时,他们是不是惊恐地看着摄像机?最后一个描述发生在我和一个朋友在一个大学课堂上拍照时,它绝对是相关的视觉信息!

项目位置和说明

在编写alt文本和图像描述时,如果有主主题,则从上到下和从左到右描述项目位置会有所帮助。如果我在电脑关机时拍了一张照片,我会首先提到显示器在我桌子的中央,我的网络摄像头上有一只鸭绒玩具,还有一个黄色的Keys-You-See键盘和一个紫色的电脑鼠标在桌子键盘的右侧。

有趣的细节

是什么使图像独特或有趣?还有哪些其他描述性信息可以帮助用户了解发生了什么?一张我和一只填充章鱼坐在房间里的照片听起来可能不是特别有趣,但描述我坐在办公椅上,头上顶着一只黄色的填充章鱼,触角遮住了我的脸,是对同一张照片更有趣的描述。

关于这张照片,我可以提到的其他视觉细节包括:

数据或成绩单链接

对于图表、图形和数据可视化,以及web文章的屏幕截图,共享原始数据的链接、文本抄本或原始内容的链接很有帮助,这样读者可以获得更多信息。这应该包含在标题或图像描述中-不要将链接粘贴到alt文本中,因为它们不可单击。

空alt文本

对于没有提供任何有意义信息的装饰性图像,例如形状或图像,我建议在大多数上下文中写“null”,而不是将alt文本留空,因为这表明图像中没有重要的细节,而且它纯粹是为了装饰目的。将其留空会让用户怀疑创建者是否忘记为图像编写alt文本。

相关链接

添加alt文本的位置

我添加alt文本或请求alt文本的一些最常见位置包括:

相关链接

用于编写alt文本的有用图形

我没有创建这个图形,它是由英国数字机构Puzzle为他们的#AccessAlt活动创建的。他们把这篇博文中的信息变成了一个有趣的信息图表,介绍如何编写alt文本,巧合的是,这篇文章中包含了我最喜欢的动物之一!

图片描述-标题为“如何编写Alt文本”的信息图,其中包含水豚的照片。alt文本的部分按颜色划分,包括识别谁、表达、描述、颜色和有趣的特征。最后的描述是:“一只水豚在温泉里看起来很放松。黄色的柚子果实漂浮在水中,其中一个在水豚的头顶上保持平衡。”

相关链接

为视障人士编写alt文本和图像描述的更多提示

作者:Veronica Lewis/Veronica With Four Eyes,www.veroniiica.com
返回到技术主页路径

分享本文
卡通狮子坐在包装好的礼物旁边,拿着气球,戴着尖顶帽子。
活动

推理活动第2部分:图片和alt文本图像描述

卡通女孩双手合十祈祷,在电脑前用文字表示痛苦
新闻

盲人或视力障碍学生全国家庭作业热线:第二部分

图书封面图像的计算机截图
故事

向Word for Office 365中的图像添加替换文本