Html 适用于'的选项卡顺序；忘记密码'；在登录窗体的中间链接

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

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

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

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

• 使用

  tabindex=“-1”

  从选项卡顺序中一起删除“忘记密码”链接。这看起来很糟糕，因为现在无法用键盘触发
• 为页面上的所有内容提供手动

  tabindex

  ，以便“忘记密码”链接位于选项卡顺序中的提交按钮之后。这看起来很糟糕，因为它感觉像是意外的行为，所以最好不要到处使用手动

  tabindex

  值
• 保持现状。由于上述原因，这是不好的

如何正确处理与制表符相关的“忘记密码”链接？什么遵循适当的可访问性标准和最佳实践，同时又不提供令人尴尬的选项卡顺序流

请在下面的演示中尝试使用选项卡：

标签{
显示：块；
}
输入{
宽度：100%；
}
.场{
边缘底部：10px；
}
.间隔{
显示器：flex；
证明内容：之间的空间；
}

电子邮件
密码
提交

根据这里的评论，我们大致了解了如何解决这个问题

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

这是一个主要的例子，逻辑上，忘记的密码链接在密码输入之后，但它在之前出现

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

在

position:relative

容器中使用一点老式的

position:absolute

可以实现下面示例中的技巧，并且在修复选项卡顺序时在视觉上是相同的。显然，您可能希望在生产中使用更好的CSS选择器

标签{
显示：块；
}
输入{
宽度：100%；
}
.场{
位置：相对位置；
边缘底部：10px；
}
.a区{
位置：绝对位置；
排名：0；
右：0；
}

电子邮件
密码
提交

有什么原因不能在输入密码后移动“忘记密码”链接吗？这将是一个显而易见且最简单的解决方案，但我只是想看看为什么这不是一个选项，因为我讨厌在不了解全部情况的情况下回答“改为这样做”。是的，这绝对是一个公平的观点和潜在的选项。我在这里的目标是看看是否有一种方法可以在当前设计的约束下实现上述目标（为了不让设计师改变他们的模拟，等等），但很高兴你提出了一个可能简单且正确的解决方案。谢谢-我认为这是一个非常合理的解决方案：默认情况下，选项卡顺序遵循HTML，没有任何调整，忘记密码按钮仍然可以通过键盘访问，而且顺序感觉更令人期待。很明显，如何实现这一点的具体细节在不同的情况下会有所不同，但对我来说，总体前提似乎是最好的解决方案。