在登录表单中间 'Forgot password' link 的适当 Tab 键顺序

Question

我工作过的一个网站有一个简单的登录表单，与下面的精简代码片段非常相似。对于这个问题，一个关键因素是密码字段上方有一个 'Forgot password?' link。

默认情况下，使用此表单时，Tab 顺序为：电子邮件输入 -> 'Forgot password?' link -> 密码输入 -> 提交按钮。

然而，这让用户感到困惑 - 他们不希望在电子邮件和密码字段之间有一个项目。

我考虑过的可能解决方案是：

使用 tabindex="-1" 将 'Forgot password?' link 从 Tab 键顺序中全部删除。这看起来很糟糕，因为现在无法用键盘触发它。
为页面上的所有内容提供手册 tabindex，以便 'Forgot password?' link 在 Tab 键顺序中位于提交按钮之后。这看起来很糟糕，因为它感觉像是意外行为，最好避免在任何地方手动设置 tabindex 值。
保持原样。由于上述原因，这很糟糕。

关于 Tab 键，处理 'Forgot password?' link 的正确方法是什么？什么遵循正确的可访问性标准和最佳实践，同时又不提供尴尬的 Tab 键顺序流程？

请随意尝试通过下面的演示进行 Tab 键操作：

label {
  display: block;
}

input {
 width: 100%;
}

.field {
  margin-bottom: 10px;
}

.space-between {
  display: flex;
  justify-content: space-between;
}

<form>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" type="email" />
  </div>

  <div class="field">
    <div class="space-between">
      <label for="password">Password</label>
      <a href="#">Forgot password?</a>
    </div>
    <input id="password" type="password" />
  </div>

  <button>Submit</button>
</form>

Answer 1

根据此处的评论，我大致了解了如何解决此问题。

逻辑 Tab 键顺序是其中一种棘手的顺序，因为它在某些情况下可以解释。

这是一个典型的例子，忘记密码 link 是在密码输入之后但在视觉上出现在密码输入之前是合乎逻辑的。

然而，由于项目被组合在一起，我相信在这种情况下，按 Tab 键切换到输入然后切换到 link 是合乎逻辑的，即使它出现在输入上方也是如此。

position: relative 容器中的一些老派 position: absolute 在下面的示例中起到了作用，并且在修复 Tab 键顺序时在视觉上是相同的。显然，您可能希望在生产中使用更好的 CSS 选择器！

label {
  display: block;
}

input {
 width: 100%;
}

.field {
  position: relative;
  margin-bottom: 10px;
}

.field a{
   position: absolute;
   top: 0;
   right: 0;
}

<form>
  <div class="field">
    <label for="email">Email</label>
    <input id="email" type="email" />
  </div>

  <div class="field">
    <div class="space-between">
      <label for="password">Password</label>
    </div>
    <input id="password" type="password" />
    <a href="#">Forgot password?</a>
  </div>

  <button>Submit</button>
</form>

在登录表单中间 'Forgot password' link 的适当 Tab 键顺序

Appropriate tab order for 'Forgot password' link in the middle of a login form

html

forms

focus

accessibility

tabindex