对于你提到的“分割线.splitter”,这并不符合常规的无障碍阅读规范,用户可能会感到困惑。
下面是一些分析建议:
1.语义化标签
在 Web 无障碍中,分割线通常用<hr>(水平规则)表示,屏幕阅读器会将其读作“分割线”或“水平线”。
如果你特意加.splitter类名,是用于样式,但不该在朗读中加入类名。
2.正常读法
- 普通
<hr>→ 屏幕阅读器默认读为“分割线”或“水平线”。 - 如果一定要加文字说明,可以用
aria-label或aria-labelledby自定义:
屏幕阅读器会读“内容分隔线”,不会读<hraria-label="内容分隔线">.splitter。
3.你提到的情况
“分割线.splitter” 听起来像是把CSS类名也朗读出来了,这通常是因为:
- 开发中用了某些无障碍测试工具的错误模拟;
- 或者代码里错误地把
class作为文本内容暴露给了无障碍 API; - 或者屏幕阅读器遇到特殊元素时的异常反馈。
4.正确的做法
- 不要将样式类名暴露给无障碍树。
- 仅当有必要区分不同类型的分割线时,才使用
aria-label提供简洁说明。 - 例如:
这时屏幕阅读器读“章节分隔”,而不是“分割线.splitter”。<hrclass="splitter"aria-label="章节分隔">
所以,“分割线.splitter”并不是正常的无障碍阅读结果,应当检查代码并避免将 CSS 类名暴露给屏幕阅读器用户。