列表底部的分页只放了两个箭头字符,读屏念出来是小于号、大于号,用户根本不知道这是上一页和下一页,只能一个个试。日志里能对上时间点,这种反而好排。
箭头是普通文本字符,没有可访问名称,也没有禁用状态的说明。到了第一页按钮仍然可聚焦,按下没有反应,用户会以为页面卡住了。这一点先确认清楚,后面就不用反复试。
<nav aria-label='文章分页'> <button aria-label='上一页' aria-disabled='true'>‹</button> <button aria-label='下一页'>›</button> </nav>
「分页按钮名称」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。先做最小复现,能稳定跑出来的问题,排查成本会低一个数量级。
别只看报错的最后一行,往上看几行,真正的起因通常在上面。
处理上按这个顺序:给两个按钮分别加 aria-label,写成上一页和下一页,别依赖字符本身;当前页禁用时用 aria-disabled 标记,同时说明已经是第一页;分页容器加 nav 角色和名称,读屏能直接跳到这一块。
结果对不对很好判断,读屏扫过分页时念出上一页和下一页,第一页上的上一页会报已禁用。
