6

Many newer UI interfaces have a preference for input field labels or help texts to be contained within the UI component itself instead of implementing them as separate labels. I was wondering if anyone is aware of the impact that this has on accessibility for vision-impaired users.

enter image description here

Another thing that is also of interest is where the help text is placed and how this impacts on the way the user uses the input fields.

If anyone has experience with the implementation of these features in accordance with accessibility guidelines, or came across specific problems please contribute to the answers.

5

There are many reasons why not to use placeholders as labels. This article by the Nielsen Norman Group sums it up nicely:

  1. Disappearing placeholder text strains users’ short-term memory. ...
  2. Without labels, users cannot check their work before submitting a form. ...
  3. When error messages occur, people don’t know how to fix the problem. ...
  4. Placeholder text that disappears when the cursor is placed in a form field is irritating for users navigating with the keyboard. ...
  5. Fields with stuff in them are less noticeable. ...
  6. Users may mistake a placeholder for data that was automatically filled in. ...
  7. Occasionally users have to delete placeholder text manually. ...

My biggest complaint about using placeholders as labels is the use of light contrast which makes them impossible to read for some visually impaired people. This means there is as good as no label for these people!

Placeholders usually have a contrast lower than 2.5:1 which is far below the value mentioned in the WCAG 2.0 guidelines. The contrast for normal sized text (including input fields) should be 4.5:1 or higher (following the AA guideline). A higher contrast however will make it look like a real value and increases the problem mentioned above at point 6. Don't underestimate the impact of contrast on readability.

The same counts for the additional help text, don't use placeholders for this. Take into account that screenreader sometimes ignore placeholders, the text dissappears when the field contains input (and in some browsers) when it has focus (all mentioned in the NN article), this all makes this text as good as not available most of the time.

So use placeholders for:

  1. Non-informative text
    I don't know if there's an example of this without being clutter.

  2. Information that is also shown elsewhere near the field.
    I personally don't see a reason for this redundancy.

  3. Additional information that has no impact when missed
    This is the only good reason for a placeholder IMHO.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.