RE: Issues with HTML5 placeholder and related Accessibility API mappings

> Unclear what spec you are referring to here

This issue occurs within HTML Accessibility API Mappings 1.0, in section 5.1, where it states the following:

5.1 input type="text", input type="password", input type="search", input type="tel", input type="url" and textarea Element

If the control has an aria-label<http://www.w3.org/TR/wai-aria/states_and_properties#aria-label> or an aria-labelledby<http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby> attribute the accessible name is to be calculated using the algorithm defined in section 5.2.7. Accessible Name Calculation<http://www.w3.org/TR/wai-aria/roles#namecalculation> of the WAI-ARIA 1.0 specification<http://www.w3.org/TR/wai-aria/>.

The accessible description is derived from the following sources: aria-describedby or a non-empty placeholder<http://www.w3.org/html/wg/drafts/html/master/forms.html#the-placeholder-attribute> attribute or a non-empty title<http://www.w3.org/html/wg/drafts/html/master/dom.html#attr-title> attribute.

input type="text", input type="password", input type="search", input type="tel", input type="email", input type="url" and textarea Element Accessible Name Calculation

  1.  Use aria-labelledby
  2.  Otherwise use aria-label
  3.  Otherwise use the associated label element
  4.  Otherwise use the placeholder attribute
  5.  Otherwise use the title attribute
  6.  If none of the above yield a usable text string there is no accessible name


The above list implies that placeholder is a labelling mechanism that superceeds that of the title attribute, which omits the title attribute from appearing in the accessibility tree object for that control when it includes all three, an explicit label using the title attribute, a placeholder attribute, and a tooltip using aria-describedby.

My objection is that placeholder should not be used as a labelling mechanism, but rather used as supplementary information that accompanies the explicit name and description.

From: Steve Faulkner [mailto:faulkner.steve@gmail.com]
Sent: Friday, March 20, 2015 3:17 PM
To: Bryan Garaventa
Cc: PF
Subject: Re: Issues with HTML5 placeholder and related Accessibility API mappings


On 19 March 2015 at 19:16, Bryan Garaventa <bryan.garaventa@ssbbartgroup.com<mailto:bryan.garaventa@ssbbartgroup.com>> wrote:
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.

Unclear what spec you are referring to here, the HTML5 spec<http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute> is quite clear:

The placeholder attribute should not be used as a replacement for a label. For a longer hint or other advisory text, place the text next to the control.

 Use of the placeholder attribute as a replacement for a label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the control's label is shown at all times, the short hint given in the placeholderattribute is only shown before the user enters a value. Furthermore, placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.

As far as how placeholder attribute content is used in accessible name/description calculation I conducted some testing a while back: http://www.html5accessibility.com/tests/placeholder-labelling.html which formed the basis for the use of the placeholder in the accessible name and description section of the HTML Accessibility API Mappings 1.0 draft
http://rawgit.com/w3c/aria/master/html-aam/html-aam.html#accessible-name-and-description-calculation


feedback on list and via bug reports is welcome
--

Regards

SteveF
HTML 5.1<http://www.w3.org/html/wg/drafts/html/master/>