Example for @aria-placeholder

Some focusable content before the fields.

Native HTML @placeholder attribute

Author gets native behavior for free.

Code for native placeholder example

<label for="bd">Birthday</label><br> <input id="bd" placeholder="MM-DD-YYYY" value="">

Rendering of native placeholder example




@aria-placeholder attribute

Though not recommended, some web authors use custom placeholder behavior to achieve dissolves or other visual effects. If you use a custom placeholder behavior, include @aria-placeholder (Currently in ARIA 1.1 draft) so the value is exposed to accessibility APIs. Note: Though inlined scripts and styles are generally not recommended; this example uses inline JavaScript and CSS for clarity.

Code for @aria-placeholder example

<label for="ariabd">Birthday </label><br> <input id="ariabd" aria-placeholder="MM-DD-YYYY" value="MM-DD-YYYY" style="color: #808080;" onfocus="if (this.value == this.getAttribute('aria-placeholder')) { this.value = ''; this.style.color = ''; }" onblur="if (this.value=='') { this.value = this.getAttribute('aria-placeholder'); this.style.color = '#808080'; }">

Rendering of @aria-placeholder example




Some focusable content after the fields.

Last updated 9 April 2015.