Overview
Can you imagine a form without a text fields? I think answer is no. usually, there are number of text fields present on the form. we commonly see the text fields, such as first name, last name, date, email, phone number, and so on.., on the form. Out of all the text fields, few text fields, such as date, phone number, email and so on.., require the hint to fill the data. Let us take date as an example. date fields are ambiguous in nature if hint/format is not provided to fill the date. The reason is that each country follows certain date format. For an instance, USA follows MM/DD/YYYY whereas India follows DD/MM/YYYYY. Thus, it is important to have accepted format as a hint for the date text field in order to enable the user to fill the data appropriately. To provide such hints for any text fields, authors use the HTML placeholder attribute. HTML placeholder attribute can be used only if it is native control. However, Authors cannot use same placeholder attribute if it is custom control and it is a problem.
In order to address this problem, ARIA 1.1 introduced new attribute called aria-placeholder and it is equivalent to HTML placeholder attribute. Aria-placeholder 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. It is important to remember that aria-placeholder is not the replacement of the label. Both aria-placeholder and label for the control serve the different purpose. To put it simpler, label is something that helps what type of the information expected whereas aria-placeholder is something that enables the user to fill the data with the help of the hint.
When aria-placeholder attribute is defined for the control and control has no value then assistive technologies like screen readers are expected to announce label and aria-placeholder text together. Similarly, when aria-placeholder attribute is defined for the control and control has value then screen readers are expected to announce both label and it’s value together but not label and aria-placeholder text together.
Author notes
- Author must use this attribute in the below roles only
- Textbox
- Searchbox
- Author should present this hint to the users only when control has no value. this includes
- When the control first receives the focus
- When user erases the previously entered value
- Authors must ensure that the value of the aria-placeholder is string
- Authors must implement necessary scripts and functionality for the hint to simulate how HTML placeholder behaves
- Authors should avoid using aria-placeholder attribute for the native controls(input types and <textarea>)
Sample code snippet
if given
<div contenteditable=”true” role=”textbox” aria-placeholder=”DD/MM/YYYY” id=”sd”>
“DD/MM/YYYY”
</div>
then the element with role=”textbox” and id=”sd” exposes aria-placeholder=”DD/MM/YYYY”
References