J2.12.2long description placement设计研究

长描述可放在图形附近的可见文本中或通过链接的独立页面提供

别名: 长描述位置 · nearby description · described-by page

概念解释

长描述写得再准,若只有辅助技术在某个属性里找得到,视力完好但读图困难的人、放大镜用户、想引用这段说明的人全部用不上。长描述要放在图附近的可见文本里,或通过一个明确的链接打开独立页面。位置本身是可达性的一部分:看不见的描述,等于没提供。

两种放法都合法。附近文本让所有人立刻读到;独立页面适合很长、需要反复查阅的说明。藏在不可见节点里两头不靠。

机制

「附近」利用的是同一视觉组和同一阅读顺序:图在上、说明在下(或反过来),看见图的人可以核对,看不见图的人按结构顺序下一站就到。链接页把长度从主文里拆走,避免打断那些不需要细节的读者,但增加一次导航;链接必须在图旁可见,并且链的名字要说清「这是这张图的数据说明」,不能叫「详情」这种会和产品详情打架的词。

历史上把说明塞进只有辅助技术读取的长描述属性,结果是双重失败:辅助技术支持参差,明眼用户完全看不见。不可见的 aria-describedby 指向一块 display:none 的文本,有些阅读器会读,有些会跳过,放大用户则永远看不到。可见,才是跨技术的稳定通道。

怎么研究

同一张图三种放置:图下可见段落、图旁「图的文字说明」链接到独立页、仅不可见属性。请屏幕阅读器用户、放大镜用户、不使用辅助技术但自称读图困难的人完成同一套数据问题,并记录他们找到说明花了多久。

自变量:放置方式、链接名称是否指明对象、说明是否在结构顺序上紧邻图。 因变量:找到说明的成功率与时长、找错到无关「详情」的次数、辅助技术组合之间的差异。

抽样应包含阅读器与浏览器的主流组合,因为不可见属性的行为在组合之间分裂最大。不要用作者自己知道链接在哪的走查代替发现性任务。

边界

图本身已经是旁边那段正文的插图、正文完整讲了同一趋势时,再在图下重复长描述会造成冗余播报,这时图侧只留短名、正文承担说明即可。交互式仪表盘一屏多图,每张都在下面贴长文会把页面撑破,更适合「每图一个说明链接」加一份总表。打印件没有链,独立页这条路径失效,必须把说明印在图旁。社交媒体或内容平台若剥掉图下 HTML,放置策略要改成平台允许的可见说明字段,而不是假设自己的 DOM 还在。

怎么落地

  • 优先把趋势说明写成图正下方或正上方的可见段落;需要很长时,在图旁放一条可见链接,链到只讲这张图的页面。
  • 链接文字带上图的对象(「季度营收图的数据说明」),不要用「详情」「更多」「点击这里」。
  • 不要把长描述只放在不可见属性或 display:none 节点里当作唯一通道。
  • 验证:分别用阅读器、放大镜、以及关掉辅助技术的普通浏览,从这张图出发找到那段说明。任何一类人找不到,或找到了无关页面,记为放置失败。

延伸

  • 同组J2.12.1 图表类图形的长描述应包含数据趋势而非仅描述视觉样式 · J2.12.3 交互式图表需要提供等价的数据表格作为替代呈现 · J2.12.4 长描述的编写需要理解图形背后的数据而非事后补写
  • 相邻J2.04 替代文本 · J2.07 低视力与屏幕放大 · J2.08 阅读顺序
  • 站内检索long description placement · visible description · described-by page

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/J2.12.2