搜索按钮里写着搜索两个字,外面又加了 aria-label 搜索,读屏念出来是搜索搜索按钮,一句话重复一遍,列表里每个按钮都这样。日志里能对上时间点,这种反而好排。
aria-label 会覆盖元素内部的文本,两者内容一致时部分读屏仍会把可见文本再读一次。属性没有带来新信息,只是把名称说了两遍。这一点先确认清楚,后面就不用反复试。
<button type='submit'>搜索</button> <!-- 不要写成 aria-label=搜索 -->
这次卡住的地方就在「可访问名重复」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
报错里带路径的,先去看那个路径在不在、权限对不对。
处理上按这个顺序:可见文字已经能说明动作时,直接删掉 aria-label,不要重复标注;图标按钮没有可见文字才用 aria-label,这是它该出现的场景;需要补充额外信息时改用 aria-describedby,让说明跟在名称后面。
结果对不对很好判断,读屏扫过按钮只念一次搜索,不再出现重复的词。
