Element: ariaPlaceholder property
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2023.
The ariaPlaceholder property of the Element interface reflects the value of the aria-placeholder attribute, which defines a short hint intended to aid the user with data entry when the control has no value.
Note:
Where possible use an HTML <input> element with type="text" or a <textarea> as these have built in semantics and do not require ARIA attributes.
Value
A string.
Examples
In this example the aria-placeholder attribute on the element with an ID of txtBoxInput has been set to a string. Using ariaPlaceholder we update the string to another value.
html
<div id="txtboxLabel">Enter your five-digit zip code</div>
<div
role="textbox"
id="txtBoxInput"
contenteditable="true"
aria-placeholder="5-digit zip code"
aria-labelledby="txtboxLabel"></div>
js
let el = document.getElementById("txtBoxInput");
console.log(el.ariaPlaceholder); // "5-digit zip code"
el.ariaPlaceholder = "12345";
console.log(el.ariaPlaceholder); // "12345"
Specifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # dom-ariamixin-ariaplaceholder |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
ariaPlaceholder
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support