我在长滩当地大学教授一门课程,大部分内容都托管在 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.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 工具告诉您的结果。