Aria happiness- 两个带有同名复选框的表单

Question

在我的页面上，我有两个登录表单 - 在导航中（出现在任何页面上）和一个在页面内容中。为了实现简单，它们几乎相同，并且所有输入都具有相同的 name.

这很有效，但是当我用 AXE 扫描页面时，我收到以下消息：

1) Checkbox inputs with the same name attribute value must be part of a group: https://dequeuniversity.com/rules/axe/3.1/checkboxgroup?application=axeAPI
  a) ["#homeLoginStayLoggedIn"]
    Fix any of the following:
      All elements with the name "stayLoggedIn" do not reference the same element with aria-labelledby
      ARIA group does not have aria-label or aria-labelledby

似乎只有复选框元素有问题。我尝试了几种修复方法，包括使用 aria-label 和 aria-labeledby 对周围 div 的 group 角色，但没有修复。

页面形式：

<form id="homeLogin" class="loginForm card-text">
    <div class="form-group">
        <label for="homeLoginEmailUsername">Email or Username:</label>
        <input type="text" class="form-control loginEmailUsername" id="homeLoginEmailUsername" placeholder="email or username" name="usernameEmail" required>
    </div>
    <div class="form-group">
        <label for="homeLoginPassword">Password:</label>
        <input type="password" class="form-control loginPassword" id="homeLoginPassword" placeholder="password" name="password" required>
    </div>
    <div class="form-group">
        <div class="form-check" role="group">
            <input type="checkbox" class="form-check-input loginStayLoggedIn" id="homeLoginStayLoggedIn" name="stayLoggedIn">
            <label class="form-check-label" for="homeLoginStayLoggedIn" id="homeLoginStayLoggedInLabel" aria-label="homeLoginStayLoggedIn">
                Remember me
            </label>
        </div>
    </div>
    <button type="submit" class="btn btn-primary submitButton">
        Sign in
        <i class="fas fa-sign-in-alt"></i>
    </button>
    <button type="reset" class="btn btn-link resetButton">Reset</button>
    <div class="form-response">
    </div>
</form>

导航窗体：

<form id="navbarLogin" class="px-4 py-3 loginForm">
    <div class="form-group">
        <label for="navbarLoginEmailUsername">Email or Username:</label>
        <input type="text" class="form-control loginEmailUsername" id="navbarLoginEmailUsername" placeholder="email or username" name="usernameEmail" required>
    </div>
    <div class="form-group">
        <label for="navbarLoginPassword">Password:</label>
        <input type="password" class="form-control loginPassword" id="navbarLoginPassword" placeholder="password" name="password" required>
    </div>
    <div class="form-group" role="group">
        <div class="form-check">
            <input type="checkbox" class="form-check-input loginStayLoggedIn" id="navbarLoginStayLoggedIn" name="stayLoggedIn" aria-labelledby="navbarLoginStayLoggedInLabel">
            <label class="form-check-label" for="navbarLoginStayLoggedIn" id="navbarLoginStayLoggedInLabel" aria-label="navbarLoginStayLoggedIn">
                Remember me
            </label>
        </div>
    </div>
    <button id="navbarLoginSubmitButton" type="submit" class="btn btn-primary submitButton">
        Sign in <i class="fas fa-sign-in-alt"></i>
    </button>
    <button type="reset" class="btn btn-link resetButton">Reset</button>
    <div class="form-response">
    </div>
</form>

更新

根据 Graham 的回答，我现在收到以下错误，这就是导致我使用所有额外 aria 属性的原因：

代码：

<div class="form-group">
    <div class="form-check">
        <input type="checkbox" class="form-check-input loginStayLoggedIn" id="homeLoginStayLoggedIn" name="stayLoggedIn">
        <label class="form-check-label" for="homeLoginStayLoggedIn">
            Remember me
        </label>
    </div>
</div>

错误：

1) Checkbox inputs with the same name attribute value must be part of a group: https://dequeuniversity.com/rules/axe/3.1/checkboxgroup?application=axeAPI
  a) ["#homeLoginStayLoggedIn"]
    Fix any of the following:
      All elements with the name "stayLoggedIn" do not reference the same element with aria-labelledby
      Element does not have a containing fieldset or ARIA group

Answer 1

简答

您可以忽略该错误消息，因为它不适用于您的实施。但是，您确实需要解决示例中其他 aria 的大量问题。

长答案

这可能不会在您的实施中造成任何问题，但显示此错误是有充分理由的。

通常，如果您使用具有相同 name 属性的多个复选框，您就是将该信息作为选项数组提交。因此，预计这些复选框彼此相关，因此应该有一个共同的命名。

使用aria-labelledby 可以关联多个标签。所以你会有“主”标签（比如“膳食选项”），然后是一个复选框特定标签（即“额外酱汁”或“额外薯条”）。

这样，当用户到达该组复选框时，他们知道它们的功能类似于多 select 并且是相关的。这就是 Axe 推荐这个的原因，因为它认为您的输入应该是选项列表的一部分，因为它们具有相同的名称。

这是一个简化的示例，其中仅包含用于说明此行为的关键属性。第一个输入为“膳食选项，额外酱汁”，第二个输入为“膳食选项，额外薯条”。

<label id="masterLabel">Meal options</label>
<label id="itemLabel1">extra sauce</label>
<input type="checkbox" aria-labelledby="masterLabel itemLabel1"/>
<label id="itemLabel2">extra chips</label>
<input type="checkbox" aria-labelledby="masterLabel itemLabel2"/>

由于这些项目实际上并不像 Ax 认为的那样相关（因为它们在页面的不同位置以不同的形式出现），这不会给您带来任何问题。

您正确地将标签与 for="idOfInput" 和 <input id="idOfInput" 相关联，因此该部分没问题。

话虽这么说...

您陷入了“尽我所能添加咏叹调”的陷阱，并在示例中的一些 aria 属性上犯了一些错误。

首先，您的 <label> 具有它们不应该具有的咏叹调属性，aria-label="homeLoginStayLoggedIn"。 aria-label 用于覆盖元素中的语义派生信息。您有效地做的是尝试使标签内容为“homeLoginStayLoggedIn”。删除这个。

由于您的标签是一对一的关系（1 个标签对应 1 个输入），因此不需要 ID。

标签上的 ID 对于 aria-labelledby 很有用，因为它正在寻找元素的 ID 以提供有关输入的标签信息，但在您的实现中不需要它，因为关联是for 和 id.

已经存在

role="group" 也不需要。如前所述，Axe 错误是假设您的复选框是作为选项的一部分一起提交的。您仅使用 role="group" 对相关控件进行分组。使用膳食示例，您可能可以控制更改膳食选项，例如您希望牛排的烹饪方式、酱汁、配菜等。这些都是“膳食选项”，因此将受益于组合在一起。

考虑到这一点，您的最终表格部分将如下所示：-

<div class="form-group">
     <div class="form-check">
         <input type="checkbox" class="form-check-input loginStayLoggedIn" id="homeLoginStayLoggedIn" name="stayLoggedIn">
         <label class="form-check-label" for="homeLoginStayLoggedIn">
             Remember me
         </label>
     </div>
 </div>

和

<div class="form-group" role="group">
     <div class="form-check">
         <input type="checkbox" class="form-check-input loginStayLoggedIn" id="navbarLoginStayLoggedIn" name="stayLoggedIn">
         <label class="form-check-label" for="navbarLoginStayLoggedIn">
             Remember me
         </label>
     </div>
 </div>

Aria happiness- 两个带有同名复选框的表单

Aria happiness- two forms with a checkbox of the same name

html

wai-aria

wcag2.0

更新

简答

长答案

话虽这么说...