问题描述
我正在研究的网站具有一个简单的登录表单,与下面的简化代码片段非常相似。出于这个问题,一个关键因素是存在“忘记密码”了吗?密码字段上方的链接。
默认情况下,使用此表单时的制表符顺序为:电子邮件输入->“忘记密码?”链接->密码输入->提交按钮。
但是,这使用户感到困惑-他们不希望在电子邮件和密码字段之间出现任何项目。
我考虑过的可能解决方案是:
- 使用
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>