Read on Twitter
#a11y #TIL
Do not (and I cannot over emphasize this enough) use placeholder text in your forms.
Stay tuned for the why and the way to fix it.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⬇️" title="Downwards arrow" aria-label="Emoji: Downwards arrow">
1/7
Do not (and I cannot over emphasize this enough) use placeholder text in your forms.
Stay tuned for the why and the way to fix it.
1/7
Problems with placeholder:
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;
2/7
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;
2/7
Problems with placeholder (continued):
Has limited styling options;
May look like pre-filled information and be skipped over.
3/7
Has limited styling options;
May look like pre-filled information and be skipped over.
3/7
An example to the solution to these problems can be found in this CodePen: https://tinyurl.com/rjj88a3
Doing">https://tinyurl.com/rjj88a3&q... things this way is better because...
4/7
Doing">https://tinyurl.com/rjj88a3&q... things this way is better because...
4/7
It helps create a visual hierarchy:
Communicates a visual and structural hierarchy that tells the user what this input is for, the things you need to know to use the input successfully.
And furthermore.....
5/7
Communicates a visual and structural hierarchy that tells the user what this input is for, the things you need to know to use the input successfully.
And furthermore.....
5/7
It can be translated. It won’t look like pre-filled information. Can be seen in low vision circumstances.
Won’t disappear when content is entered into the input.
Can include semantic markup and be styled via CSS.
6/7
Won’t disappear when content is entered into the input.
Can include semantic markup and be styled via CSS.
6/7
Full disclosure: Most of this thread is copy/pasted from this article by @ericwbailey, https://tinyurl.com/txd3854
It& #39;s">https://tinyurl.com/txd3854&q... so action packed with information I tried to share the most critical information, but this thread does not do it& #39;s source material justice. Go read it.
7/7
It& #39;s">https://tinyurl.com/txd3854&q... so action packed with information I tried to share the most critical information, but this thread does not do it& #39;s source material justice. Go read it.
7/7
