Overview
- Chrome, Safari, IE and Firefox are using placeholder content in accessible name calculation. (what text they expose to accessibility APIs as a controls label).
- There are differences in its use in Firefox dependending on how the label element is used (this is a bug)
- Interent Explorer only exposes placeholder text as an accessible name/description when no other source (label element, title attribute etc.) is found (this is a bug).
- Safari does not expose title attribute text when placeholder/title combination used (this is a bug)
- Safari places placeholder text before label text (this is a bug)
- There is a difference between its use in Chrome, Firefox, IE and Safari when a wrapped label is also used (this is an interoperability issue)
- There is a difference between its use in Chrome, Firefox, IE and Safari when a title attribute is also used (this is an interoperability issue)
- There is a difference between its use in Chrome, Firefox, IE and Safari when a label element and for/id attribute is also used (this is an interoperability issue)
Test results
test cases | expected accessible name and description mapping | Firefox 24. windows | Chrome 30 windows | IE 11 windows 8 | Safari 6 OSX |
---|---|---|---|---|---|
placeholder with no label | accessible name: placeholder text | accessible name: placeholder text | accessible name: placeholder text | accessible name: placeholder text | accessible name: placeholder text |
placeholder with label associated using title attribute on input | accessible name: placeholder text accessible description: title attribute text |
accessible name: placeholder text accessible description: title attribute text |
accessible name: title attribute text accessible description: placeholder attribute text |
accessible name: title text accessible description: none |
accessible name: placeholder text accessible description: none |
placeholder with label associated using label element and for/id attributes | accessible name: label text accessible description: placeholder text |
accessible name: label text accessible description: none |
accessible name: label text accessible description: placeholder text |
accessible name: label text | accessible name: placeholder text + label text (reverse order) |
placeholder with label associated by wrapping label element around text and input | accessible name: label text accessible description: placeholder text |
accessible name: placeholder text + label text accessible description: none |
accessible name: label text accessible description: placeholder text |
accessible name: label text | accessible name: placeholder text + label text (reverse order) |
test cases
placeholder with no label
<input type="text" placeholder="poot">
placeholder with label associated using label element and for/id attributes
<label for="a1">label</label> <input id="a1" type="text" placeholder="pootish">
placeholder with label associated using title attribute on input
<input type="text" placeholder="poots" title="label">
placeholder with label associated by wrapping label element around text and input
<label>label <input type="text" placeholder="pooter"></label>