可访问性：正确的 html 代码可以让屏幕阅读器读出 <form> 描述

Question

假设您有一个表单：

<form action="/action_page.php">
  <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>

如何使其易于访问，以便辅助功能屏幕 reader 在出现在表单上时读出表单名称“这是我的关于客户的表单：”？如果 Bootstrap 可以使用它的 sr-only class，它应该是

 <form action="/action_page.php">
      <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">
    </form>

也要加上<fieldset>吗？谢谢。

Answer 1

对于像“这是我关于客户的表格”这样的非常笼统的描述，最有效的可能不是 <legend>，而是表格开头的标题或段落。

要牢记 <legend> 的一个非常重要的特征是它的文本 在每个字段的标签之前重复 。这个功能非常强大，所以要小心使用。

这种重复特征意味着图例的文本必须极其简洁和精确，这意味着它应该只用于非常密切相关的领域。

它通常用于单选按钮选项，如下所示：

<fieldset>
<legend>Gender</legend>
<input id="m1" type="radio"/><label for="m1">Male</label>
<input id="m2" type="radio"/><label for="m2">Female</label>
<input id="m3" type="radio"/><label for="m3">Other</label>
</fieldset>

在这里，作为一个屏幕 reader，当您导航到单选按钮时，您会听到“性别男性”、“性别女性”和“性别其他”。这样快速，高效，提醒“性别”很有用。

如果 <legend> 的文本很长或者不是真正局限于几个字段，那么它在每个字段之前重复的事实可能很快就会变得烦人而不是真正有用。例如，将它用于多项选择题是一个坏主意，因为长度：

<!-- Bad example -->
<fieldset>
<legend>When the first web accessibility guidelines version 1 has been published ?</legend>
<input id="m1" type="radio"/><label for="m1">1995</label>
<input id="m2" type="radio"/><label for="m2">1998</label>
<input id="m3" type="radio"/><label for="m3">2001</label>
</fieldset>

在这里，您在每个答案之前都会重复一个很长的问题，因此作为屏幕 reader 用户，您无法真正做到快速高效，例如，在限时考试中可能会略微增加障碍。问题最好放在标题中，使用箭头键阅读时只会阅读一次。请注意，虽然仅使用选项卡导航时它会被完全跳过，但这通常不是一个大问题，因为大多数用户不仅仅依赖选项卡。

<fieldset>
<h1>When the first web accessibility guidelines version 1 has been published ?</h1>
<input id="m1" type="radio"/><label for="m1">1995</label>
<input id="m2" type="radio"/><label for="m2">1998</label>
<input id="m3" type="radio"/><label for="m3">2001</label>
</fieldset>

回到你的案例，你的文字“这是我关于客户的表格”也不是很短，尤其是它非常笼统。字段集可以覆盖几十个字段，甚至可能会保留整个表单。所以在每个字段之前重复它可能比有用更烦人。

Answer 2

首先，感谢您对辅助功能的关心，非常感谢！

我建议一个更简单的解决方案：在您的表单中添加一个 aria-label。因此，您的表单实际上将包裹在屏幕 reader 公告中，很像 fieldset。像这样：

<form action="/action_page.php" role="form" aria-label="this is my form about the customers:">

但是请缩短它，像这样：

<form action="/action_page.php" role="form" aria-label="Customer data">

我们需要用耳朵或手指处理大量信息（如果用盲文阅读），所以简洁也很重要。

可访问性：正确的 html 代码可以让屏幕阅读器读出 <form> 描述

Accessibility: the proper html code to pronounce the <form> description by screen readers

html

forms

accessibility