WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 21 months ago

#24042 closed enhancement (duplicate)

Help text visibility in title input box is not intuitive

Reported by: aniketpant Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.6
Component: Accessibility Keywords: ux-feedback
Focuses: Cc:

Description

Currently, the input box for title which shows on a new post creation page uses a label to display the help text- "Enter title here". This text disappears on focus and an that point of time, there is no place which points out that this input box is for the title.

This problem has been pointed out by a lot of people and it surfaced after the new Gmail design came out. The problems it generated are very similar and as you may have used it, there are no labels for the email recipients field and the subject field.

The issue is not very big as such but it does generate ambiguity in some cases. The solution to this would be to have the label as an overlay on the input, which can slide/move to a new position on focus. And placeholder text can be used as help text. This way the help text will be visible at the start and the label will be visible throughout.

Attachments (1)

24042.diff (2.8 KB) - added by lessbloat 21 months ago.

Download all attachments as: .zip

Change History (7)

comment:1 follow-up: @SergeyBiryukov2 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

Duplicate of #23980.

comment:2 in reply to: ↑ 1 @aniketpant2 years ago

Replying to SergeyBiryukov:

Duplicate of #23980.

The issue I am raising over here is different from #23980. That ticket is dealing with an issue specific to the placeholder text visibility when post format is changed, whereas I wish to pose a question on the general usability of the input field.

comment:3 @SergeyBiryukov2 years ago

  • Milestone set to Awaiting Review
  • Resolution duplicate deleted
  • Status changed from closed to reopened

I see, thanks for the clarification.

comment:4 @toscho2 years ago

  • Cc info@… added

@lessbloat21 months ago

comment:5 @lessbloat21 months ago

Unfortunately the html5 input placeholder doesn't work in IE8 & IE9.

I refactored our custom placeholder code in 24042.diff​. A couple notes:

  • This now keeps the placeholder text there until you start typing.
  • Note sure if common.js is the right file for this. Seemed to be the best place. This can be reused anywhere in the admin now.
  • I used _.throttle to prevent the keyup from firing so much (note, I tried _.debounce, but it delayed the hiding of the placeholder text a bit longer than _.throttle)

Tested in MAC Chrome & FF, and WIN Chrome, FF, IE8

Last edited 21 months ago by lessbloat (previous) (diff)

comment:6 @helen21 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from reopened to closed

There's also an idea in the form of a plugin over on #14097 - closing this as a dupe.

Note: See TracTickets for help on using tickets.