I inquired earlier today if there was a way to give focus to an HTML form field through a simple link.
The reason of my inquiry was that WCAG 2.0 recommends to make it possible for the user [to] easily navigate to [detected form submission errors] to fix the problem
.
But in practice, with the following HTML form:
<p><label for='email' id='emaillabel'>Email:</label>
<input type='text' id='email' name='email'></p>
neither a link to #email
nor to #emaillabel
will give focus to the input field.
For instance, it would be useful to be able to markup a possible error message above that form as follows:
<p class='error'>The <a href="#email">email address</a> is not valid.</p>
And when the user hits the link in that message, she gets moved to the email field, with focus on it, ready to fix the noted problem.
I don’t know if there is a justification to explain that links don’t activate form fields — it would seem like a fairly reasonable way for browsers to facilitate their users’ life.
In any case, here is a tiny piece of JQuery-based JavaScript that does this, for links with the class field
:
$("a.field").click(function() {
var target = $(this).attr("href").substring(1);
$("#" + target).focus();
return false;
});