WCAG 2.0 aria-labelledby 表格 header 和免责声明

Question

当您尝试在表格的顶部。我认为这就是我认为的完成方式，但我是辅助功能的新手，所以任何更正将不胜感激！

<form id="profile optional">
  <h1 arialabelledby="profile">Profile</h1>
  <p aria-describedby="optional">All fields are required unless marked optional</p>

  <fieldset>
    <legend id="userInfo" aria-labelledby="formA">User Info</legend>

    <div class="form-control">
      <label id="firstName" for="firstName">First Name</label>
      <input type="text" name="firstName" aria-labelledby="firstName userInfo" aria-required="true" aria-describedby="error-message"/>
      <span id="error-message" style="display:none" aria-hidden="true">Name is required</span>
    </div>

    <div class="form-control">
      <label id="lastName" for="lastName">Last Name</label>
      <input type="text" name="lastName" aria-labelledby="lastName userInfo" aria-required="true" aria-describedby="error-message"/>
      <span id="error-message" style="display:none" aria-hidden="true">Name is required</span>
    </div>

    <div class="form-control">
      <label id="nickName" for="nickName">Nick Name (optional)</label>
      <input type="text" name="nickName" aria-labelledby="nickName userInfo"/>
    </div>
  <fieldset>

  <fieldset>
  ...
  </fieldset>

  <button type="submit" aria-label="Submit Profile">Submit</button>
</form>

编辑*提交按钮的代码

Answer 1

这是您不需要任何 ARIA 的情况。您可以退回到良好的用户体验，这将使 ARIA 变得不必要。

在表格的开头，您提供了所有字段都是必填项的说明。那很好。然后对于选项字段，您在 <label> 中包含“（可选）”。这样也好

你可以到此为止，一切就绪。

但是，您已将 ARIA 添加到表单中，并向后获取了一些。例如：

<form id="profile optional">
 <h1 arialabelledby="profile">Profile</h1>
 <p aria-describedby="optional">All fields are required unless marked optional</p>

您是在告诉 <form> 标记的 <h1> 什么时候应该反过来。您还告诉 <p> 它正在由 <form> 描述，这又是相反的方式。把所有这些都拉出来。

或者以这个案例为例：

<div class="form-control">
  <label id="lastName" for="lastName">Last Name</label>
  <input type="text" name="lastName" aria-labelledby="lastName userInfo" aria-required="true" aria-describedby="error-message"/>
  <span id="error-message" style="display:none" aria-hidden="true">Name is required</span>
</div>

<input> 不需要 aria-labelledby — <label> 是免费的。此外，将它与 <legend> 相关联会使它更加冗长并且会使用户感到困惑。

您还应该删除 aria-required 并只使用 HTML5 布尔值 required。 It is well supported 并有利于非屏幕 reader 用户。

虽然我怀疑您只会在出现错误时显示错误消息，但您可以将其完全删除并让浏览器处理。如果您需要保留它以实现向后兼容，请删除 aria-hidden，因为 display:none 无论如何都会将其从屏幕 reader 中隐藏。

按钮也是如此。转储 ARIA 并使其成为 <button type="submit">Submit Profile</button>。您的所有用户都将受益于更详细的按钮。

既然你很好地利用了<legend>和<fieldset>，你可以把那些东西都留下来，而且你的状态很好。

您刚刚创建了一个可访问、可用、无 ARIA 的表单。无 ARIA 是一件好事。 ARIA 是一种桥接技术，仅应在常规 HTML.

中没有可供性的情况下使用

WCAG 2.0 aria-labelledby 表格 header 和免责声明

WCAG 2.0 aria-labelledby for form header and disclaimer

html

wai-aria

wcag2.0