Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Non-Compliant Example:

...

Acceptance Criteria

The placeholder attribute does not take the place of a <label>.

In this case you would need to add either a visible or an invisible form label for screen reader users.

One issue with the placeholder is that it disappears once information has been entered into the field, making it more difficult for users to make corrections.

Don’t place important form instructions in the placeholder.

Ensure that important form instructions are available even when the user fills the data.

The placeholder attribute is announced by most screen reader and browser combinations.

Don’t place characters, such as dashes (-------) ” or parenthesis ”( )” in the placeholder.

Those characters will be announced by the screen reader as follows:

It will be announced by screen readers as “dash, dash, dash, dash”.

...