WAI-ARIA: aria-placeholder (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Properties

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

Share A11Y Love

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

Similar Posts

WAI-ARIA: aria-valuenow (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Defines the current value for a range widget. See related aria-valuetext. This property is used, for example, on a range widget such as a slider or progress bar. If the current value is not known (for example, an indeterminate progress bar), the author SHOULD NOT set the aria-valuenow attribute. If the aria-valuenow attribute is…

WAI-ARIA: aria-dropeffect (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description [Deprecated in ARIA 1.1] In ARIA 1.1 the drag and drop attributes aria-grabbed and aria-dropeffect were slated to be deprecated. The idea was to use native accessibility API features for drag and drop instead. However, in practice, since the accessibility API features for accessible drag and drop still don’t exist and likely won’t for…

WAI-ARIA: aria-valuetext (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Defines the human readable text alternative of aria-valuenow for a range widget. This property is used, for example, on a range widget such as a slider or progress bar. If the aria-valuetext attribute is set, authors SHOULD also set the aria-valuenow attribute, unless that value is unknown (for example, on an indeterminate progressbar). Authors…

WAI-ARIA: aria-autocomplete (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Indicates whether inputting text could trigger display of one or more predictions of the user’s intended value for an input and specifies how predictions would be presented if they are made. The aria-autocomplete property describes the type of interaction model a textbox, searchbox, or combobox employs when dynamically helping users complete text input. It…

WAI-ARIA: aria-live (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. The values of this attribute are expressed in degrees of importance. When regions are specified as polite, assistive technologies will notify users of updates but generally do not…

WAI-ARIA: aria-rowspan (Property)

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. See related aria-rowindex and aria-colspan. This attribute is intended for cells and gridcells which are not contained in a native table. When defining the row span of cells or gridcells in a native table, authors SHOULD use…

Leave a Reply

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