Grow your CSS skills. Land your dream job.

Accessibility concerns about form validations

  • # March 10, 2010 at 11:29 am

    We need to validate forms using javascript. To ease the proccess we use jQuery plugins. But how much these validations are really accessible? Most of the times, we see codes like this:

    Code:
    $(‘:input’).blur(function() {
    if ($(this).val().length == 0) {
    $(this)
    .addClass(‘error’)
    ‘);
    .after(‘This field must
    }
    });
    $(‘:input’).focus(function() {
    $(this)
    .removeClass(‘error’)
    .next(‘span’)
    .remove();
    });

    /* The code is from jQuery: Novice to Ninja (http://www.sitepoint.com) */
    we are adding and span after the input elemnt which occures when the user tabs to the next element. But he can’t see the error, right? Because he has to back up to see that.
    Ok, we fix it. the ‘formValidator’ plugin of jQuery solves this by adding all error messages at the end of the form. (Poorly. It’s message is ‘This field is required’ which means nothing: which field?) And, how can we notify the user that something has changed in the document? The user pressed the submit button and is waiting to see the result but nothing happens.
    We have this fancy thing called ‘live regions’ in html 5 (?), but how can we make form validation accessible today?
    Am I missing something or I’m wrong?

    # March 15, 2010 at 6:44 pm

    Form validation with javascript, for all intents and purposes, is inaccessible. With javascript off, the whole system is circumvented. With that in mind, don’t rely on it. Put it there just so it can block submission for people that have it enabled. Validate on your server THOROUGHLY. That way, if your javascript is inaccessible (and you must assume that it is), you have back up.

    Otherwise, I don’t quite understand your question. Are you asking how to get the proper field names to show up?

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".