文本元素无障碍适配咨询：数字读法修正与表格缩写优化

问题1：修正“between 0-5m”的屏幕阅读器读法 #

你当前方案的核心问题是“5m”被识别为字母“m”而非“million”，同时视觉隐藏CSS的属性值错误（多余单引号）导致样式失效。以下是修正方案：

步骤1：修复视觉隐藏CSS #

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

添加clip属性提升旧浏览器兼容性，同时移除属性值的单引号（CSS无需字符串引号）

步骤2：调整HTML结构 #

保留视觉显示的“0-5m”，同时为屏幕阅读器提供精准文本：

between 
<span aria-hidden="true">0-5m</span>
<span class="visually-hidden">0 and 5 million</span>

若需保留原排版细节，可拆分处理：

between 
0<span aria-hidden="true">-</span><span class="visually-hidden"> and </span>
<span aria-hidden="true">5m</span><span class="visually-hidden">5 million</span>

问题2：表格表头缩写CAGR的无障碍优化 #

针对需求（首次读表头时读缩写+全称、内容仅读缩写、CAGR按单个字母读取），采用以下方案：

表头单元格处理 #

视觉显示“CAGR¹”，屏幕阅读器读取“C A G R，Compounded Annual Growth Rate”：

<th>
  <span aria-hidden="true">CAGR<sup>1</sup></span>
  <span class="visually-hidden">C A G R, Compounded Annual Growth Rate</span>
</th>

表格内容单元格处理 #

仅让屏幕阅读器按单个字母读取CAGR，视觉保持缩写：

<td>
  <span aria-hidden="true">CAGR</span>
  <span class="visually-hidden">C A G R</span>
</td>

替代方案（利用<abbr>标签） #

若需保留语义提示，可结合<abbr>标签（部分屏幕阅读器会自动读取title属性）：

<!-- 表头 -->
<th>
  <abbr title="Compounded Annual Growth Rate">
    <span aria-hidden="true">CAGR</span>
    <span class="visually-hidden">C A G R</span>
  </abbr>
  <sup>1</sup>
</th>

<!-- 内容单元格 -->
<td>
  <abbr title="C A G R">CAGR</abbr>
</td>

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