Inline Text Overview

Inline text is a lightweight method of providing instructional text on a page, generally to help users input data. It is static, immediately visible to the user, and doesn't require user action to invoke it.

Elements and Appearance of Inline Text

Inline text appears either persistently beneath the input or select component or inside an input component field as placeholder text.

Static Help Text

The following examples show static inline instructional text beneath the UI component.

sample text field and spinbox, with some static instruction text below the input field which reads "Increase limit amount to allow multiple potential matches"

Inline text may appear visually styled beneath a UI component as well.

Here, there is a form with embedded help content within the form, which reads "Enter your comment", and beneath the field is a "tip" icon and a tip-type instructional Help text suggesting a way the user can assign a task to another using the comment form.

Use inline text when:

Placeholder Text Overview

Placeholder text is text displayed in the input field before the user types a value. It disappears when the user starts typing in the field. Usability tests consistently show that placeholder text in form fields depresses user performance more than helps it. However, there are cases where placeholder text is not only useful, but also more elegant than inline text.

Placeholder text is supported as an HTML5 web form input field attribute.

Placeholder Text Use Cases

The Oracle Alta UI permits use of placeholder text only in the following strict use cases:

The following lists the appropriate use of placeholder text as instructional text:

Placeholder text as instructional text must be short and precise. It appears with frequently-used and familiar text fields, such as date, email address, description, and phone number. The user should never feel challenged to recall what the instructional text was before typing commenced.

Below is an example of placeholder text used as instructional text in a description field and a select date field.

Examples of Placeholder Text as Instruction

The following lists the appropriate use of placeholder text as a prompt.

Accessibility Factors

Although HTML5-compliant browsers support placeholder text, the browsers' default font color doesn't meet the 4.5:1 contrast ratio required for accessibility. It is strongly recommended that teams modify the CSS rule for the default placeholder text to use a different font color. In addition, set the font style to italic; this helps users distinguish placeholder text from a default data value.

Changing the default HTML5 font color and style will also insure Success Criteria 3.3.2. Additionally, use the Title attribute to identify form fields that use placeholder text as prompts to screen readers. Oracle JET and ADF development frameworks either address these issues by default, or provide a style class to apply to placeholder text used as prompts. The placeholder text font color #737373 is acceptable for this purpose.

Additional Resources