无障碍开发：如何让屏幕阅读器将“-”读为“dash”且不修改原文本

以下是几个不改动原视觉文本的实现方案，适配你当前的JSX场景：

• 视觉隐藏替换文本方案（推荐）
  这个方法能完美保留原文本的视觉展示，同时给屏幕阅读器提供适配后的内容：

  1. 先把原文本中的“-”全局替换为“ dash ”；
  2. 用aria-hidden="true"包裹原渲染内容，让屏幕阅读器忽略它；
  3. 添加一个视觉隐藏的span，放入处理后的文本，供屏幕阅读器读取。

  代码示例：

  // 处理文本，替换所有"-"为" dash "
  const accessibleText = textChunk.replace(/-/g, ' dash ');
  
  return (
    <span>
      {/* 原文本：视觉可见，屏幕阅读器忽略 */}
      <span aria-hidden="true" dangerouslySetInnerHTML={{ __html: textChunk }} />
      {/* 适配文本：视觉隐藏，屏幕阅读器读取 */}
      <span style={{ 
        position: 'absolute',
        width: 1,
        height: 1,
        padding: 0,
        margin: -1,
        overflow: 'hidden',
        clip: 'rect(0, 0, 0, 0)',
        border: 0 
      }}>
        {accessibleText}
      </span>
    </span>
  );
  

  这里的视觉隐藏样式是行业通用的无障碍方案，不会影响页面布局，仅对屏幕阅读器可见。

• 关于aria-labelledby的说明
  aria-labelledby需要关联页面中已存在的其他元素ID，用来读取该元素的内容，并不适合你当前的场景——你需要的是动态替换文本的读取内容，而非引用已有元素，所以这个属性在这里用起来会很繁琐，不推荐。

• aria-label的局限性
  如果你尝试用aria-label，要注意它只能接收纯文本，无法解析dangerouslySetInnerHTML里的HTML结构，如果原文本包含HTML标签，用aria-label会丢失对应的语义信息，因此不如第一个方案可靠。

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