在登录表单的中间“忘记密码”链接相应的选项卡顺序

如何解决在登录表单的中间“忘记密码”链接相应的选项卡顺序

我正在研究的网站具有一个简单的登录表单，与下面的简化代码片段非常相似。出于这个问题，一个关键因素是存在“忘记密码”了吗？密码字段上方的链接。

默认情况下，使用此表单时的制表符顺序为：电子邮件输入->“忘记密码？”链接->密码输入->提交按钮。

但是，这使用户感到困惑-他们不希望在电子邮件和密码字段之间出现任何项目。

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

• 使用tabindex="-1"删除“忘记密码？”选项卡顺序中的所有链接。但这似乎很糟糕，因为现在无法用键盘触发它。
• 为页面上的所有内容提供手册tabindex，以便“忘记密码？”链接位于选项卡顺序中的“提交”按钮之后。这似乎很糟糕，因为它感觉像是意外的行为，因此最好避免在任何地方使用手动tabindex值。
• 保持现状。出于上述原因，这很糟糕。

处理“忘记密码”的正确方法是什么？关于制表链接？什么遵循适当的可访问性标准和最佳实践，同时又不提供麻烦的选项卡顺序流程？

随时尝试查看下面的演示：

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>

解决方法

根据此处的评论，我们对如何解决此问题非常粗略。

逻辑制表符顺序是那些棘手的顺序之一，因为在某些情况下它易于解释。

这是一个很好的例子，从逻辑上讲，被忘记的密码链接位于输入密码之后，但是在外观上看起来很直观。

但是，我认为，在将这些项目组合在一起的情况下，即使输入出现在输入上方，也可以先选择标签然后点击链接，这是合乎逻辑的。

在下面的示例中，position: absolute容器中的一点旧式position: relative可以达到目的，并且在固定制表符顺序时在外观上是相同的。显然，您可能希望在生产中使用更好的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>