如何让屏幕阅读器可识别文档中的搜索匹配高亮内容

• 优先使用原生语义化的<mark>标签替换无意义的<span>标签，<mark>是HTML5原生的高亮标记元素，自带相关语义，主流屏幕阅读器默认可识别该标签的高亮属性。
• 补充屏幕阅读器专属提示文本，增加视觉隐藏的辅助说明，不会干扰正常视觉展示，又能给视障用户传递匹配信息：
  首先定义屏幕阅读器专属的视觉隐藏样式：

  /* 仅会被读屏软件识别，视觉上完全隐藏 */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  

  改造后的高亮部分HTML代码示例：

  <span class="sr-only">搜索匹配项：</span>
  <mark class="match">This is a match</mark>
  

  原有高亮CSS无需大幅修改，仅需适配<mark>标签的默认样式即可：

  .match {
    background-color: yellow;
    /* 可选：清除<mark>标签默认的用户代理样式 */
    color: inherit;
  }
  

• 可选增强方案：如果需要告知用户匹配项的序号，可在辅助文本中补充序号信息，适合多匹配结果的场景：

  <span class="sr-only">第2个搜索匹配项，共8个：</span>
  <mark class="match">This is a match</mark>
  

  读屏软件会播报为「第2个搜索匹配项，共8个：This is a match」，视障用户可以清晰感知当前匹配位置和总匹配量。
• 兼容说明：上述方案兼容NVDA、VoiceOver、JAWS等所有主流屏幕阅读器，无需额外适配。

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