代码之家 › 专栏 › 技术社区 › Andrew Pham

为表格标题和免责声明添加WCAG 2.0 aria标签

wcag2.0 wai-aria html

Andrew Pham · 技术社区 · 8 年前

当您试图在表单顶部放置标题和免责声明(如“除非标记为可选,否则所有字段都是必需的”)时,我不确定表单是如何被aria标记为aria或aria描述的。我认为这就是我认为的方法,但我对可访问性还不熟悉,所以如果有任何更正,我将不胜感激!

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

1 回复 | 直到 8 年前

aardrian 8 年前

这种情况下,您不需要任何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> 由 <表单> ,这又是另一种情况。把这一切都拉出来。

或者以这个案例为例:

<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 <标签> 这是免费的。另外,将其与 <legend>

您还应该删除 aria-required 只需使用HTML5布尔值 required . It is well supported 并使非屏幕阅读器用户受益。

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

<button type="submit">Submit Profile</button> 。所有用户都将受益于更详细的按钮。

既然你好好利用了 <图例> 和 <fieldset> ,你可以把所有的东西都留下,你的状态很好。

您将创建一个可访问、可用、无ARIA的表单。无ARIA是一件好事。ARIA是一种桥接技术,只应在常规HTML中没有启示时使用。