J2.04.1functional alternative text设计研究

描述功能与信息而非外观

别名: alt 写功能 · accessible name · 替代文本

概念解释

替代文本回答的是:看不见这张图的人,仍然需要知道什么、做成什么。搜索按钮上的放大镜应叫「搜索」,不是「白色放大镜画在蓝色圆上」。维修文里一张裂屏照片,若证据是裂缝位置,就写裂缝;若只是配气氛,外观描写就是跑题。同一张位图,在按钮上是功能名,在文章里是信息——语境决定写什么,不是像素决定。

机制

辅助技术把可访问名称放进线性语音流。外观描写占用时间,却不提供下一步动作或事实。功能图(控件里的图)的名称应等于那个动作;信息图的名称应等于当初把它放进页面所要补充的那条信息。第二层:看得见的人用图是平行通道,看不见的人只有这一串字,所以「像不像」不是目标,「等价」才是。

文件名、IMG_3847、开头的「图片:」会被读出来,等于把实现细节塞进内容。公司标志写组织名,不写「蓝色字标」。装饰图不该有这段名称,那是下一组的事;这里假定这张图需要被说出,问题是说出哪一层。复杂图一张短 alt 说不完趋势,只先点明「需要更长的等价物」,写法放到后面。

怎么研究

关掉图或遮住屏,只听名称,看任务能否完成、事实能否说对。对照三种稿:外观描写、功能/信息、文件名。用无障碍树看计算出来的名字是不是屏幕上那句可见文字(按钮尤其如此)。

自变量:alt 策略(外观 / 功能或信息 / 文件名)、图的角色(控件 / 内容 / 标志)。 因变量:无图时任务完成率、错误动作、听到外观词却做不成事的次数。

自动化只能抓「有没有 alt 属性」,抓不到「写的是不是该写的那一层」。

边界

艺术作品、漫画格、验证码,外观有时就是信息,但仍要落到「读者需要带走什么」而不是颜料清单。产品照片若差别只在颜色或款式,颜色是信息不是修辞。图标按钮没有可见字时,alt 就是唯一名称,更不能写成外形。图里嵌了必须读的字,那些字是信息,应进名称或邻近文本,而不是「一张有字的图」。

怎么落地

  • 写之前先问:这张图是让人去点,还是让人知道一件事。前者用动词或控件名,后者用那件事。
  • 删掉「图片 / 图标 / 蓝色」这类外壳,除非颜色或材质本身就是要传达的事实。
  • 标志用组织或产品名;按钮上的图与旁边可见文字重复时,图不再抢名称。
  • 验证:用阅读器只听图的名字,遮住屏幕做完该做的动作或复述该知道的事实。听到外形却做不成,就重写。

延伸

  • 同组J2.04.2 长度需足够传达但不冗长 · J2.04.3 复杂图形需要长描述
  • 相邻J2.05 装饰性图像 · J5.10 名称、角色与状态
  • 站内检索alternative text · accessible name · functional alt

同组卡片

快捷操作

分享

分享当前页面

ios_share

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