WAI ARIA alert on form submit (with page reloading)

Question

Let's say we have a classic form - a few input fields that must meet some pattern. When user enters incorrect data and submits this form all the fields that are filled wrong are marked as invalid and appropriate error message is provided for every incorrect field.

I need to make this form WAI ARIA compliant, so that after form submission the accessibility tools will see these errors first. I've found solution that implements it by dynamic html modification using JS (http://jsfiddle.net/nS3TU/1/):

HTML:

<form id="signup" method="post" action="">
    <p id="errors" role="alert" aria-live="assertive"></p>
    <p>
        <label for="first">First Name (required)</label>
        <input type="text" id="first">
    </p>
    <p>
        <input type="submit" id="button" value="Submit">
    </p>
</form>

JS:

$('#signup').submit(function () {
    $('#errors').html('');
    if ($('#first').val() === '') {
        $('#errors').append('Please enter your first name.');
    }
    return false;
});

Here validation does not reload page, and the "alert" area is dynamically modified.

In my case the page is reloaded on validation phase, and I don't know how to make aria alert work. After hours of investigation I didn't find any solution at all. Any ideas?

Answer 1

I think there's a simple solution, but you'll have to say if it covers your cases.

I would be careful about making something "WAI-ARIA compliant", that should not be a goal in itself. WAI-ARIA is intended to map web pages to application roles, but only applications are actually suitable for this treatment.

For a classic web-form, you do not need WAI-ARIA at all. The alert aspect would not work if the page reloads, as it would only alert if the content changed dynamically.

If the page does not reload (as per the example), you would want to ensure that submitting the form doesn't just leave the user sitting on the button. You can manage the focus to achieve this:

    $('#errors').append('Please enter your first name.');

    // Make the error message focusable, but not in the default tab-order:
    $('#errors').attr('tabindex', '-1').css('outline', '0');

    // Set the focus on the (first) error message:
    $('#errors').focus();

JSFiddle updated here.

A couple of articles on error-message best-practices your question reminded me of, which would help extend this answer to other use-cases:

• Displaying error messages
• Accessible form validation.