如何屏蔽屏幕阅读器对化学式中=、–的默认解读，呈现化学键含义？

针对你遇到的屏幕阅读器对化学式特殊符号解读错误的问题，以下是两种无需修改视觉呈现、也无需使用图片的可行方案：

方案一：视觉隐藏辅助文本 + 隐藏原符号的屏幕阅读器读取 #

这种方法保留视觉上的化学符号，同时让屏幕阅读器读取正确含义，完全替代默认解读。

1. 先定义一个用于视觉隐藏的CSS类（仅屏幕阅读器可见，视觉上不可见）：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

2. 应用到化学式中：

• 双键（=）示例：

H<sub>2</sub>C<span aria-hidden="true">=</span><span class="sr-only">双键</span>CH<sub>2</sub>

• 单键（–）示例：

H<sub>2</sub>N<span aria-hidden="true">–</span><span class="sr-only">单键</span>CH<sub>3</sub>

方案二：使用 aria-label 直接指定读取内容 #

对于单个符号，也可以用<span>包裹并设置aria-label，部分屏幕阅读器会优先读取标签内容：

• 双键示例：

H<sub>2</sub>C<span aria-label="双键">=</span>CH<sub>2</sub>

• 单键示例：

H<sub>2</sub>N<span aria-label="单键">–</span>CH<sub>3</sub>

注：方案一的兼容性更好，能确保所有主流屏幕阅读器（NVDA、VoiceOver、JAWS）都正确读取；方案二在部分旧版本阅读器中可能仍会读取原符号，建议优先使用方案一。

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