In my personal a11y rules, placeholders should only ever contain the default values of optional fields. That's the only place they make perfect sense. Otherwise, just use a label. There is one exception, though: an <input type="search" placeholder="Search…">, which is already rather accessible on its own (though it may profit from a separate button).
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Yeah search is one of those weird exceptions to a visible label, but even then aria-label="search the site" is advised.
Actually a better way is to do it "properly" and do:
<formrole="search"><!-- your input, submit button (preferable, depending on implementation though) and a visually hidden label using CSS to make it accessible to screen readers but invisible visually --></form>
Or use the floating label technique (where the label moves up when the field is focused) if space / design allows.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
In my personal a11y rules, placeholders should only ever contain the default values of optional fields. That's the only place they make perfect sense. Otherwise, just use a label. There is one exception, though: an
<input type="search" placeholder="Search…">, which is already rather accessible on its own (though it may profit from a separate button).Yeah search is one of those weird exceptions to a visible label, but even then
aria-label="search the site"is advised.Actually a better way is to do it "properly" and do:
Or use the floating label technique (where the label moves up when the field is focused) if space / design allows.