登录表单中间"忘记密码"链接的适当 Tab 键顺序

Question

我工作过的一个网站有一个简单的登录表单，它与下面的代码片段非常相似。为了这个问题，一个关键因素是有一个"忘记密码？"密码字段上方的链接。

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

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

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

• 使用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>

Answer 1

根据评论，这里对如何解决这个问题有一个非常粗略的想法。

逻辑制表顺序是其中一个棘手的问题，因为在某些情况下可以进行解释。

这是一个很好的例子，忘记的密码链接在密码输入之后，但它在视觉上出现在之前，这是合乎逻辑的。

然而，由于项目被分组在一起，我相信在这种情况下，选项卡到输入，然后到链接是合乎逻辑的，即使它出现在输入上方。

position: relative容器中的一点老派position: absolute可以实现以下示例中的功能，并且在固定选项卡顺序时在视觉上是相同的。显然，您可能希望在生产中使用更好的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>