面向屏幕阅读器用户的掩码脱敏数字适配方案咨询

核心思路是把视觉展示效果和读屏播报逻辑完全解耦，不让读屏软件直接解析页面上渲染的掩码文本，从根源避免异常朗读问题，同时100%保留现有视觉效果，普通用户的浏览体验不会有任何改动。

具体落地步骤 #

• 视觉层逻辑完全保留：照常渲染········1234或********1234格式的脱敏文本，不需要调整现有样式规则。
• 覆盖读屏默认朗读逻辑：给包裹脱敏号码的外层容器添加aria-label属性，属性值固定为「已隐藏账号前8位，尾号为X X X X」，注意尾号四位数字之间必须加半角空格，读屏软件会自动逐位播报数字，不会把连续数字识别为整数整体朗读。
• 屏蔽原始文本的读屏解析：给内层做视觉展示的脱敏文本节点添加aria-hidden="true"属性，让读屏完全跳过这段内容，彻底解决重复朗读掩码字符、错误解析数字的问题。

通用参考实现（HTML） #

<span class="masked-account">
  <!-- 仅做视觉展示，对读屏设备隐藏 -->
  <span aria-hidden="true">········1234</span>
</span>

实际使用时给外层.masked-account元素动态拼接aria-label即可，比如尾号为1234时，aria-label对应的值为已隐藏账号前8位，尾号为1 2 3 4。

避坑说明 #

• 不要尝试用零宽空格分隔掩码字符、替换特殊掩码字符这类偏方，不同系统的读屏软件（Windows端NVDA、苹果端VoiceOver、安卓端TalkBack）对特殊字符的解析规则差异极大，这类方案兼容性极差，后续维护成本极高。
• aria-label里不需要描述掩码是黑点还是星号，这类信息对屏幕阅读器用户没有实际价值，反而会增加不必要的听读负担，只需要说明前面号码已隐藏、清晰播报尾号即可。
• 不要把完整未脱敏的账号号码放在DOM隐藏节点里，哪怕加了读屏隐藏属性也存在信息泄露风险，aria-label里只需要拼接可公开的后四位数字即可。
• 不要用JS强行劫持读屏焦点事件模拟播报，这类方案会破坏读屏软件的原生操作逻辑，反而会造成更严重的体验问题。

内容的提问来源于stack exchange，提问作者degys