无障碍开发：让屏幕阅读器正确朗读form表单描述的HTML实现方案

AI 小北

2026-10-4

结论先行

你目前的写法是错误的，单独使用<legend>标签没有对应的<fieldset>父容器时，语义无效，绝大多数屏幕阅读器不会识别并朗读你写的legend内容。

可行的两种适配方案

方案1：使用`aria-label`属性（最简洁）

直接给<form>标签添加aria-label属性，填入你想要屏幕阅读器朗读的表单名称即可，不需要额外加DOM元素：

<form action="/action_page.php" aria-label="this is my form about the customers:">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

方案2：使用`<fieldset>`+`<legend>`组合

如果要使用sr-only类的方案，必须用<fieldset>把所有表单内容包裹起来，<legend>作为<fieldset>的第一个直接子元素使用，这样语义才完整，屏幕阅读器会自动朗读legend的内容作为表单组的名称：

<form action="/action_page.php">
  <fieldset class="border-0 p-0 m-0"> <!-- 这里加Bootstrap的边框、内边距、外边距清零类，避免默认样式影响视觉效果 -->
    <legend class="sr-only">this is my form about the customers:</legend>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

注：Bootstrap的sr-only类本身的功能是正常的，它可以让元素在视觉上隐藏，同时保留给屏幕阅读器识别，只需要保证使用它的元素语义结构正确即可。