Overview

Test results

How the placeholder attribute affects accessible name calculation for input type="text"
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>