如何隐藏网页标签且屏幕阅读器可读？多电话号码字段适配问询

核心实现思路 #

通过视觉隐藏标签保证屏幕阅读器可读取字段名称，同时利用aria-describedby属性关联统一的输入示例，让每个字段聚焦时同步读出示例内容。

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. HTML结构实现 #

将三个电话字段（区号、前缀、后缀）放在同一行，同时关联视觉可见的输入示例：

<!-- 视觉可见的输入示例，供所有字段共享 -->
<p id="phone-example">输入示例：123-456-7890</p>

<!-- 多字段输入容器，flex布局实现同一行排列 -->
<div style="display: flex; gap: 8px; margin-top: 8px;">
  <!-- 区号字段 -->
  <div>
    <label for="area-code" class="sr-only">区号</label>
    <input 
      type="text" 
      id="area-code" 
      aria-describedby="phone-example"
      placeholder="区号"
      maxlength="3"
      aria-required="true"
    >
  </div>

  <!-- 前缀字段 -->
  <div>
    <label for="prefix" class="sr-only">前缀</label>
    <input 
      type="text" 
      id="prefix" 
      aria-describedby="phone-example"
      placeholder="前缀"
      maxlength="3"
      aria-required="true"
    >
  </div>

  <!-- 后缀字段 -->
  <div>
    <label for="suffix" class="sr-only">后缀</label>
    <input 
      type="text" 
      id="suffix" 
      aria-describedby="phone-example"
      placeholder="后缀"
      maxlength="4"
      aria-required="true"
    >
  </div>
</div>

3. 关键属性说明 #

• .sr-only类：隐藏视觉标签但保留屏幕阅读器的可访问性，避免冗余视觉元素同时保证无障碍支持。
• aria-describedby：将每个输入框与示例文本关联，当屏幕阅读器聚焦字段时，会先读取字段标签（如“区号”），紧接着读出示例内容（“输入示例：123-456-7890”），满足同步读取的需求。
• placeholder：提供视觉上的字段提示，辅助普通用户理解每个输入框的作用，但不替代label（屏幕阅读器优先读取label内容）。
• maxlength：限制每个字段的输入长度，符合电话号码的格式规范。
• aria-required：如果字段为必填项，添加该属性告知屏幕阅读器用户必须填写。

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