如何用HTML和CSS为纯文本公式提供无障碍文本替代方案？

针对Canvas平台仅支持内联CSS、需适配屏幕阅读器的场景，最佳方案是用标准视觉隐藏的无障碍文本关联显示公式，既保留教授偏好的纯文本视觉呈现，又让辅助设备读取自然语言描述，完全符合无障碍规范：

核心实现步骤 #

• 为显示用的纯文本公式容器添加aria-labelledby属性，指向无障碍文本的唯一ID；
• 创建包含自然语言公式描述的<span>，通过内联CSS将其视觉隐藏（仅屏幕阅读器可见）；
• 给显示的纯文本公式添加aria-hidden="true"，避免屏幕阅读器重复读取内容。

示例代码（对应你的WACC演算案例） #

<!-- 视觉隐藏的无障碍文本，仅屏幕阅读器可见 -->
<span id="wacc-calc-desc" style="position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;">
全权益公司的加权平均资本成本等于其无杠杆权益成本r下标u，因此可得：加权平均资本成本等于（无杠杆权益成本加上市场风险溢价）的平方，等于（百分之五加百分之六）的平方，结果为百分之零点零一二一
</span>

<!-- 显示给普通用户的纯文本公式 -->
<div aria-labelledby="wacc-calc-desc">
  <p aria-hidden="true">
    全权益公司的WACC等于其权益成本(r<sub>u</sub>)，因此可得：<br>
    WACC = (r<sub>u</sub> + market risk premium)<sup>2</sup><br>
    = (5% + 6%)<sup>2</sup><br>
    = 0.0121%
  </p>
</div>

方案优势 #

• 完全保留教授要求的纯文本公式视觉效果，无额外样式干扰；
• 屏幕阅读器通过aria-labelledby直接读取自然语言描述，不会误识别为图片（解决你第一种方案的问题）；
• 视觉隐藏的CSS是无障碍领域的标准实现方式（等效于通用的sr-only类），比小尺寸文本方案更规范、更可靠；
• 避免内容重复读取：显示文本添加aria-hidden="true"，确保辅助设备只读取无障碍描述文本。

注意事项 #

• 自然语言描述要精准匹配公式逻辑，可根据课程受众调整表述（比如将r_u描述为“无杠杆权益成本r下标u”或简化为“无杠杆权益成本”）；
• 每个公式的无障碍文本ID必须唯一，避免跨内容关联错误；
• 用主流屏幕阅读器（如NVDA、VoiceOver）测试验证，确保读取流程自然流畅。

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