The HTML aria-placeholder attribute
The aria-placeholder attribute provides short hint text for an empty custom textbox. Prefer the native placeholder attribute on real inputs; use aria-placeholder only on custom role="textbox" widgets.
Overview
The aria-placeholder attribute provides a short hint shown in an empty input to help the user enter data.
It supplies a hint for a custom input or combobox. A native <input>'s placeholder attribute already provides this for real form fields, so reach for the ARIA version only on a custom widget that is not a true input.
Like all ARIA, aria-placeholder changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<div role="textbox" contenteditable="true" aria-placeholder="Search…"></div>Values
| Value |
|---|
| A string. |
Example
<div role="textbox" contenteditable="true" aria-placeholder="Type a message" aria-label="Message"></div>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- On a real form field, use the native <input>
placeholderattribute instead. - Never use a placeholder as the only label — pair it with a real <label>.
- Keep the hint short and treat it as supplementary, not essential.
Frequently asked questions
What does aria-placeholder do?
When should I use aria-placeholder instead of the placeholder attribute?
placeholder attribute.