Issues with HTML5 placeholder and related Accessibility API mappings

Hi,
Per the ARIA Caucus call this morning, I'll clarify the point I mentioned at the end of the call that wasn't able to be minuted.

The issue being that many see placeholder as a label substitute, which is an incorrect assumption, even though the spec seems to imply that this is true.

Technically the concept of placeholder is to provide hint text in the place where the value is to be entered, as a temporary 'place holder' for the value of that field, not as a label for that field.

When placeholder is used as a label however, it is temporary and disappears when a user interacts with the field, rendering this as useless as a visual label, which presents cognitive accessibility issues for some users, and presents additional issues for non-sighted AT users.

As such, it seems logical to me to treat placeholder as a temporary field value in the accessibility tree when there is no actual value present on the edit control, because it's acting as a place holder value, which would have no impact if the form was submitted because it still wouldn't exist in the DOM as the value of that field.

Additionally, here illustrates the issue with using placeholder as a labelling mechanism in the accessibility tree:

<input title="Birth date" placeholder="mm/dd/yyyy" />

In IE11, the title is used as the accessible name for the field, and there is no representation of the placeholder text in either the value, description, or help properties for that object.

In Firefox however, the placeholder text is used as the form field label, and the title is used as the description for that object, which to me, should be the other way around if this is the desirable way to go, since the title is the explicit label, and the placeholder is the description.

This last technique presents issues as well, take for example the following:

<input title="Birth date" placeholder="mm/dd/yyyy" aria-describedby="t1id" />
<div id="t1id"> Make sure you only enter a future date </div>

Now, suddenly in FF, the explicit label provided using the title attribute is gone, not in the name nor description properties, nor is it anywhere else, making it undetectable for AT users even though it appears visually to sighted mouse users.

It still seems to me that the best place is to either use the value property to temporarily convey the placeholder value until actual content is entered into the field using a text change event, or to use a custom property for this purpose that doesn't involve either the name or description.

Received on Thursday, 19 March 2015 19:16:37 UTC