Question

Imagine I have a form with a hidden tip:

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

And jQuery pops up the tip when input value is invalid:

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

When that user left the text input without entering anything how do I tell web reader to read content of hint that now visible hint?

Answer 1

span with a tabindex can get focused. By Adding tabindex to hint and focusing on it when input value is invalid we can force web reader to read popped up hint!

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