CODEWITHSUNDEEP
jquerywordpressaccessibility
Jen
Jen

Reputation: 1733

Accessibility of error message in Wordpress, form validation

I'm working on an accessible Wordpress theme, and have come to a point where I cannot use a regular form validation message. Usually I'd have the validation inserted immediately beneath a field, so that blind users who use the arrow down key will get any error message before proceeding to the next field.

But now I am forced by the structure at one point, to have an error message alone at the top of a page. I would like to avoid placing the user's focus at the beginning of the page, where he'd be listening to all the links again. Is this a good plan?

<div class="error">
<a href="#" class="assistive-text foci">Error</a>
Your login failed. Please try again.
</div>
<script>
jQuery(document).ready(function($) {
     $('#main').find('.foci').focus();
});
</script>

The css is same as twentyeleven theme (clip method):

.assistive-text {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  max-width:1em;  /* Chrome */
}

Upvotes: 1

Views: 404

Answers (2)

unor
unor

Reputation: 96607

I think you'd better use the strong element (HTML5 spec) for the error message. It indicates the importance.

Maybe you'd like to use WAI-ARIA? See, for example, http://webaim.org/techniques/aria/:

An aria-live value of assertive will result in the user being alerted to the content change immediately or as soon as possible. Assertive would be used for important updates, such as error messages

It also says something about the focus for error messages:

Additionally, it is often necessary to set focus to page elements. For instance, a form validation error message might be displayed as text (not a link or form element) within a page using scripting. Visual users can immediately see the error message. However, a screen reader user may not know that the new message is present. In order to set focus to the error message so it can be read by a screen reader, the message must be able to receive focus - something it cannot typically do unless it is a link or form element.

[…]

Upvotes: 2

Jared
Jared

Reputation: 39883

As a blind computer user I don’t mind my focus being moved to the top of the page for a form validation error assuming that I expected to be taken to a new page when submitting the form. Based on your example it appears this is a login form which I would expect to take me to another page. There for having focus set to the error text at the top of the page after submitting the form is acceptable to me. I would find it annoying though if while filling out the form before hitting submit real time validation was done moving me to the top of the page, and causing me to lose my place.

Upvotes: 1

Related Questions