1

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

<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();
    }
});

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

4

3 回答 3

0

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

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

placeholder 属性不能很好地替代 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 事件。

于 2013-01-22T18:49:50.367 回答
0

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

  • 让它们脱颖而出：使用明亮的颜色。此外，当涉及到成功/警告/错误消息时，请坚持使用通常的颜色（请参阅twitter bootstrap是如何做到的）。

  • 让用户有时间看到它们：使用过渡效果。也许不是超级花哨的东西。用户总是想读一些会在他眼皮底下弹出的东西，但他需要注意它。过渡让用户有时间看到它们。

  • 明确它与用户正在操作的内容相关：可能通过一个箭头指示弹出窗口与焦点字段相关。

好像您更关心警告/错误/重要消息，我建议您查看此线程。

于 2013-01-18T23:56:58.143 回答
-1

span有一个tabindex可以集中注意力。通过添加tabindex提示并在输入值无效时关注它，我们可以强制网络阅读器读取弹出的提示！

<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();
    }
});
于 2013-01-19T00:23:05.917 回答