Don't Use The Placeholder Attribute - Smashing Magazine - 4 views
www.smashingmagazine.com/...placeholder-attribute
inclusive input formdesign aria forms inclusivedesign hint accessibility form html
shared by Vernon Fowler on 27 Jun 18
- No Cached
-
To recap, the placeholder attribute: Can’t be automatically translated; Is oftentimes used in place of a label, locking out assistive technology; Can hide important information when content is entered; Can be too light-colored to be legible; Has limited styling options; May look like pre-filled information and be skipped over.
-
Move the placeholder content above the input, but below the label:
-
Development Here’s how to translate our designed example to code:
- ...4 more annotations...
-
aria-describedby ensures that the p content will be described last, after the label’s content and the kind of input it is associated with.
-
By using aria-describedby to programmatically associate the input with the p element, we are creating a priority of information for screen readers that has parity with what a person browsing without a screen reader would experience.
-
The floating label effect, a close cousin to this phenomenon, oftentimes utilizes the placeholder attribute in place of a label, as well.
-
Content hidden by an on-screen keyboard. 3rd party keyboards with larger heights may have a greater risk of blocking important content.
-
Not only argues for not using the placeholder attribute but also describes an inclusive input hint and how to code it. -
