<div id='chart' role='img'
aria-label='近七日订单量折线图 周三最高 1280 单'></div>
用读屏软件打开报表页,640×300 的图表位置只念一句画布,没有任何数据说明,视障用户完全拿不到信息。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:canvas 本身没有可读内容,aria-label 和替代文本都没写。图表旁边也没有文字版的数据表。
「图表无障碍标签」排查到最后往往是很小的一处差异,前面那些复杂猜测可以先放一放。同一份配置存在多处的,先确认改的是被加载的那一份。
新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。备份不是备了就行,恢复一次才算数,很多备份文件打开才发现是空的。
接口问题先分清是没发出去、发出去了没收到,还是收到了处理失败。
处理上按这个顺序:给容器加 role 为 img 和描述性 aria-label;图表下方提供可展开的数据表格;用读屏软件实际走一遍 确认能读到关键数字。
确认没问题再收工,读屏能念出图表标题和关键数值,不再只有画布两个字。
