我在长滩当地大学教授一门课程,大部分内容都托管在 Canvas LMS 上,以便学生可以线上访问。 当然,我希望内容尽可能地易于访问,所以感谢 Canvas 在其中内置了 a11y 工具。
但它并非完美无缺。 它像其他所有 a11y 工具一样做出假设,并遵循编程到其中的指南。 它不像 WCAG 一样,在更新时直接烘焙进去并更新。
我之所以会想起这件事,是因为 Jeremy 昨天 描述了他对撰写图像描述的热爱。
我喜欢写
alt
文本。 我最近描述了如何更新我自己的网站上的发布界面,以便将alt
文本的textarea
置于我的带照片笔记的中心位置。 从那以后,我一直享受着撰写有用且引人入胜的alt
文本的创造性挑战。
我认同这一点! 撰写 alt
文本是一项挑战,需要在技术和创意之间进行微妙的平衡。 这既是使内容更易于访问,又是增强用户体验的机会。
Canvas 工具中的一个编程指南是 alt
文本的字符数限制为 120 个。 为什么是 120 个? 我不知道,我找不到任何支持该确切数字的指南或规则。 一个答案 是屏幕阅读器在 125 个字符后停止宣布文本,但是 这显然是不正确的,至少在今天是这样。 关于 alt
文本应该有多长的普遍建议各不相同。
- Jake Archibald 从 情感的角度谈论长度。 细节很好,但过多的细节可能会扭曲焦点,这很有道理。
- Dave 将它们视为 简短的、简洁的段落。
- Carrie Fisher 建议将字符数限制在 150 个,不是因为屏幕阅读器会截断它们,而是更多地作为一种心理提醒,即事情可能变得过于描述性。
- Daniel Göransson 在 2017 年的这篇指南中表示,这取决于具体情况,以及知道图像的某些细节是否值得额外解释。 但他通常倾向于简洁。
那么,alt
文本应该有多长? 这里的一般共识是,没有硬性限制,而更多的是对图像所起作用的意义的上下文感知,并相应地进行调整。
这又让我回到了 Jeremy 的文章。 他正在为一组演讲者头像编写 alt
文本,并意识到文本开始听起来都一样。 他停下来思考了一下这种体验,将其与有视力用户的体验进行了比较,并在两者之间创造了平等。
随着演讲者阵容中加入的演讲者越来越多,我越来越觉得自己在使用
alt
文本重复自己。 […] 有视力的人观看一个满是演讲者页面的体验是,过了一段时间,这些图像会逐渐融合在一起。 因此,如果alt
文本过了一段时间也开始听起来有点重复,也许这并不算坏事。 屏幕阅读器用户将获得等效的体验。
我喜欢这一点。 因此,如果您正在寻找有关字符数的硬性规则,我很抱歉让您失望。 像许多其他事情一样,上下文是关键,而这是一种无法编码,甚至 无法自动完成的事情。
说到这里,我刚注意到 Twitter 有一个 UI 来显示 alt
文本。

屏幕阅读器用户对
longdesc
属性的体验如何? 如果它很好,那么当需要更多内容时,这可能是您要找的东西。据我所知,它已过时。
此外,这不是以
alt
属性使用的方式进行描述,而是指向描述文本的 URL(例如,包含长描述文本的 HTML 页面)。longdesc
属性实际上不存在。 它采用 URL,因此即使在浏览器/屏幕阅读器组合中可以正常使用,它也是一种糟糕的体验。 来源:我参与了编写 W3C/WAI 图像教程。MDN 文档指出
longDesc
已过时。 如果您真的想提供更长的描述,我可能会使用aria-description
。longdesc 已过时,并已从 HTML5 中移除(无论从您的角度来看,这是幸运还是不幸)。
longdesc 现在已过时。 建议的替代方法是使用常规链接。
https://html.whatwg.com.cn/multipage/obsolete.html#attr-img-longdesc
https://mdn.org.cn/en-US/docs/Web/API/HTMLImageElement/longDesc
https://github.com/w3c/wcag/issues/950
@Lars Kölker,不要使用
aria-description
。 首先,aria-description
仅在 ARIA 1.3 草案规范中。 此外,它与longdesc
不完全相同(longdesc
用于保存 URL,aria-description
是一个平面文本字符串)。 它目前也还没有任何支持,而使用aria-describedby
来指向页面上的文本(无论是否隐藏)则可以。 更不用说aria-description
不会在一段时间内被自动翻译服务识别。关于这篇文章,请咨询您的用户。 从一些受欢迎的网络人物那里获得提示是一个合理的起点,因为他们应该会收到屏幕阅读器用户和可访问性从业人员的反馈。 但不要将其扩展到起点之外。 从您网站的用户那里了解情况。 记住,简洁通常是一个好的基准位置。
我们将
alt
文本限制在 150 个字符或更少的原因主要是,屏幕阅读器对alt
文本的处理方式与正文文本不同。 屏幕阅读器用户可以暂停正文文本或逐字或逐个字符地浏览。 在大多数情况下,屏幕阅读器会完整读取alt
文本,因此简洁是最好的。 另一个使其简短的原因是,如果它很长(这同样适用于longdesc
),它可能包含也对有视力用户感兴趣的内容。 在这种情况下,aria-describedby
是更好的选择。绝对同意这取决于具体情况,而这往往是问题的开始。 一个典型的设置是将图像存储在某种资产管理系统中,因此期望图像的
alt
文本应存储在相同的位置。 不幸的是,由于图像的感知通常基于周围页面的上下文,因此alt
文本通常需要在与其他内容同时编写时编写。 这很难向编辑解释。WCAG 是那些必须通过实践才能学到的东西。 在 Windows 上下载 NVDA,或在 Mac 上启用 VoiceOver。
花时间学习键盘快捷键——是的,快捷键比 Tab 多得多。
关闭显示器或闭上眼睛,然后浏览您的网站。 您会很快了解到您的体验有多好或多糟糕,远胜于 Lighthouse 得分或 AXE 工具告诉您的结果。