Question

想象一下，我有一个隐藏提示的表单：

<form>
    <input type='text' id='name' placeholder='Name'>
    <span id="name_hint" style="display: none;">Please enter your name</span>
</form>

当输入值无效时，jQuery会弹出提示：

$('#name').on('blur', function(){
    if(!this.value.length) {
        $('#name_hint').show();
    }
});

当该用户在没有输入任何内容的情况下离开文本输入时，如何告诉网络阅读器阅读现在可见提示的提示内容？

Answer 1

我认为这个问题更多地属于ux.stackexchange.com，但对于初学者我可以推荐：

让它们脱颖而出：使用鲜艳的颜色。此外，在成功/警告/错误消息时，请坚持常用颜色（请参阅twitter bootstrap如何做）。
让用户有时间查看它们：使用过渡效果。也许不是超级华丽的东西。用户总是希望阅读会在他的鼻子下面弹出的东西，但他需要注意到它。 Transition为用户提供了查看它们的时间。
明确说明它与用户操作的内容有关：可能是通过一个箭头指示弹出窗口与焦点上的字段相关。

如果您对警告/错误/重要消息的关注更多，我建议您查看thread。

Answer 2

对于初学者来说，表单元素应该真正具有<label>才能真正访问：

<form>
 <input type='text' id='name'>
  <label for='name'>Please enter your name</label>
</form>

占位符属性为not a good subsitute for a label。但是，如果您想使用您的方法，则应该是：

<form>
    <input type='text' id='name' placeholder='Name' aria-labelledby="name_hint">
    <span id="name_hint" style="display: none;">Please enter your name</span>
</form>

然后你的JS也应该有一个onFocus事件。

Answer 3

带有span的

tabindex可以得到关注。通过添加tabindex来提示并在输入值无效时关注它我们可以强制web阅读器读取弹出的提示！

<form>
    <input type='text' id='name' placeholder='Name'>
    <span id="name_hint" style="display: none;" tabindex="2">Please enter your name</span>
</form>


$('#name').on('blur', function(){
    if(!this.value.length) {
        $('#name_hint').show().get(0).focus();
    }
});

使用JavaScript弹出的HTML表单输入提示可访问？

3 个答案: