Question

我不确定某个表单是如何通过aria-labelledby或aria描述的，当您尝试设置标题和免责声明时，如果＆＃34;所有字段都是必需的，除非标记为可选＆＃34;表格顶部的免责声明。我认为这就是我认为它已经完成的方式，但我对可访问性不熟悉，所以任何更正都会受到高度赞赏！

<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变得不必要。

在表单开头，您提供了所有字段都需要的说明。那很好。然后，对于选项的字段，您包括＆＃34;（可选）＆＃34;在<label>。这也很好。

你可以在那里停下来做好准备。

但是，您已将ARIA添加到表单中并将其中的一部分向后移动。例如：

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

你告诉<h1>标有<form>的标签应该是另一种方式。您还告诉<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并使非屏幕阅读器用户受益。

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

按钮也一样。转储ARIA并将其设为<button type="submit">Submit Profile</button>。所有用户都将从更详细的按钮中受益。

由于您充分利用了<legend>和<fieldset>，您可以保留所有这些内容并保持良好状态。

您刚刚创建了一个可访问，可用，无ARIA的表单。 ARIA免费是一件好事。 ARIA是一种桥接技术，只有在普通HTML中没有可供性时才能使用它。

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

1 个答案: