0

当您尝试在表单顶部放置标题和免责声明（如“所有字段都是必需的，除非标记为可选”）时，我不确定表单是如何使用 aria-labelledby 或 aria- describeby 的。我认为这就是我认为的完成方式，但我是可访问性的新手，所以任何更正将不胜感激！

<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>

编辑*提交按钮的代码

4

1 回答 1

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>

你是在告诉<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 boolean required。它得到了很好的支持，并使非屏幕阅读器用户受益。

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

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

既然你很好地利用了<legend>and <fieldset>，你就可以留下所有这些东西，而且你的状态很好。

您将刚刚创建了一个可访问、可用、无 ARIA 的表单。无 ARIA 是一件好事。ARIA 是一种桥接技术，仅应在常规 HTML 中没有可供使用的情况下使用。

于 2016-07-15T14:17:05.707 回答