图标按钮需要可访问名称
别名: 无障碍名称 · aria-label · accessible name
概念解释
即使视力正常的用户能猜出一枚图标按钮,屏幕阅读器、语音控制和开关设备仍然需要一个可访问名称(accessible name)。名称是辅助技术用来称呼、聚焦和激活该按钮的字符串,不是悬停才出现的工具提示,也不是画在图里的像素。缺名称时,播报变成「按钮」或文件名,语音用户说不出要点哪一个,开关用户只能靠顺序盲试。图标按钮把可见标签拿掉了,名称就必须另给。
机制
辅助技术不读位图,读的是无障碍树里的名称、角色、状态。可见文字按钮的名称通常就是那几个字;图标按钮把字拿走以后,树里若没有替代字符串,名称计算会落到空、或落到 SVG 里的无意义 title、或落到 CSS 生成内容。语音控制靠「点击 + 名称」寻址,空名称的按钮不会出现在可说名单里。工具提示在指针悬停时出现,键盘和触屏常常唤不出,屏幕阅读器也不保证去读它——它不是名称的替代品。可见性与可访问性在这里分叉:一枚被看见的图标可以同时是一枚无名的控件。
怎么研究
用屏幕阅读器走查和语音控制指令测试,而不是用视力正常被试的识别率。记录每枚图标按钮被播报的字符串,以及「点击保存 / 点击搜索」这类口令是否命中。
自变量:名称来源(aria-label、可见邻接文字、SVG title、无)、工具提示是否存在。 因变量:播报是否可理解、语音命中率、完成时间、误激活邻近按钮的次数。
把工具提示算作「有标签」会假通过。测试必须关掉指针悬停,只用键盘或语音走完同一条任务。
边界
旁边已经有可见文字、并且那文字在无障碍树上与按钮合并为同一名称的,不必再叠一条重复的 aria-label,否则会播两遍。纯装饰的图形不是按钮,应被从树上拿掉而不是起名。名称要描述动作(「删除这条评论」)而不是外观(「红色垃圾桶」)。国际化时名称必须随语言切换;只在源语言里写对、译文里留空,等于在其他语言里又变成无名按钮。
怎么落地
- 每枚图标按钮在无障碍树上都要有一句人能听懂的动作名称,优先用可见文字;不可见时再用显式名称属性。
- 不要把工具提示当作名称;工具提示可以重复那句话,但不能是唯一来源。
- 用屏幕阅读器的浏览和语音控制的「显示编号 / 点击 ××」各跑一遍主要工具栏。
- 验证:关掉显示器听一遍工具栏。若出现「按钮」「图像」「未命名」或文件名,该图标按钮没有可访问名称。