Description

New in ARIA 1.1

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.

Authors SHOULD NOT use aria-placeholder instead of a label as their purposes are different: The label indicates what kind of information is expected. The placeholder text is a hint about the expected value. See related aria-labelledby and aria-label.

Authors SHOULD present this hint to the user by displaying the hint text at any time the control’s value is the empty string. This includes cases where the control first receives focus, and when users remove a previously-entered value.

Note: As is the case with the related HTML placeholder attribute, use of placeholder text as a replacement for a displayed label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the control’s label is shown at all times, the short hint given in the placeholder attribute is only shown before the user enters a value. Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.

Browser Compatibility For aria-placeholder

desktopmobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung Internet
ariaPlaceholder

Screen Reader Support For aria-placeholder

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey aria-placeholder for text field with no valuesupportedsupportedsupportedsupportedsupportedsupportedsupportedunknownsupportedsupportedsupported
MUST NOT convey aria-placeholder when (HTML attribute) placeholder is definedsupportedsupportednonesupportedsupportedsupportedsupportedunknownsupportedsupportedsupported
SHOULD contribute to the accessible namesupportedsupportedsupportedsupportedsupportedsupportedsupportedunknownsupportedsupportedsupported
MAY convey aria-placeholder for text field with valuenonenonenonesupportednonenonenoneunknownsupportednonenone

aria-placeholder Example

HTML Example

The following example shows a searchbox in which the user has entered a value:

<span id="label">Birthday:</span>
<div contenteditable role="searchbox" aria-labelledby="label" aria-placeholder="MM-DD-YYYY">03-14-1879</div>

HTML Example 2

The following example shows the same searchbox in which the user has not yet entered a value or has removed a previously-entered value:

<span id="label">Birthday:</span>
<div contenteditable role="searchbox" aria-labelledby="label" aria-placeholder="MM-DD-YYYY">MM-DD-YYYY</div>

Characteristics

Related Concepts

  • HTML placeholder

Used in Roles

Inherits into Roles

Value

  • string
    • Unconstrained value type.

Semantic HTML

No HTML element equivalent.

The aria-placeholder attribute is meant to simulate the HTML5 behavior of the placeholder attribute and make it valid within other simulated control types and roles where the HTML5 placeholder attribute is not valid.

All scripting, styling, and functionality of the use of this attribute must be implemented manually by the developer since the attribute itself is not meant to have any effect on browser functionality.

The aria-placeholder attribute and the HTML5 placeholder attribute should not be used together on the same element, nor should aria-placeholder be used on native form controls where the HTML5 placeholder attribute is appropriate.

Reference

Leave a Reply

Your email address will not be published. Required fields are marked *