1

If a user does not fill out the email address by leaving off the @ or domain - and we do not provide an example of a correct email address on submit (example@example.com) does this fail the success criterion for WCAG 2.0 3.3.3 regarding error suggestions?

I've looked at a number of major sites and leading web sites and I only see validation errors that pertain to the lack of correct email address. It looks like a lot of sites use placeholders to instruct the user on formatting, however, once submitted the user has no clear direction on proper format.

unor
  • 92,415
  • 26
  • 211
  • 360
Beth
  • 43
  • 6

2 Answers2

4

In my opinion, yes it does. This presumes that it was rejected for a known reason (formatting, etc.), so that reason should be communicated to the user.

Sadly, looking at major sites is not a good indicator of a best practice, just an indication that they are not following this checkpoint (or, more likely, are unaware of it, WCAG, and all things related).

The placeholder is never an adequate label and rarely is it adequate for instructions as it goes away. Instead, some instructional text associated with the field (maybe with ARIA if necessary) can head off errors sooner, though the error message should still convey what went wrong.

Think of all those times you enter a password only to be told after the fact that doesn't follow some arcane formatting rules. Telling you up front doesn't guarantee you'll get it right, but it reduces the likelihood everyone will get it wrong. It is also content you can re-use for the error message.

aardrian
  • 8,581
  • 30
  • 40
3

You are not really failing for WCAG 3.3.3

3.3.3 Error Suggestion: If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content. (Level AA)

This point means that you can provide a suggestion. For instance, the user type "user AT example.com" and you suggest "Do you mean user@example.com?"

Here, you fail for WCAG 3.3.1:

3.3.1 Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text. (Level A)

You have to describe the error in plain text which means "Enter a valid e-mail address (example: user@domain.com)".

And you might also be concerned by 3.3.2, which is the lack of instructions

3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)

which means that if a label is not sufficient, you have to give instructions (valid format).

Note that things might be different when you use the browser self validation process for the HTML5 input[type="email"] element. Because there, the browser Accessibility API should provide an explicit error message.

Adam
  • 17,838
  • 32
  • 54