Good accessibility usually starts with clear words and the right HTML elements, not a large amount of extra code.
What You Need to Know
Placeholder text disappears as someone types and may be difficult to read. Keep a permanent label outside the field so people always know what information it asks for.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<label for="user-email">Your email address</label>
<input id="user-email" name="email" type="email" placeholder="[email protected]">
<p>The label stays visible while the placeholder disappears as you type.</p>Let’s Read the Code
- <label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
- <input>: The input is a control. Its type changes the way people enter information.
- for: For connects a label or output with a control by ID.
- id: An id uniquely identifies an element on this page.
What the example shows: Placeholder gives an example value, not a lasting question or accessible label.
What Happens in the Browser?
Try this with Tab and Shift+Tab. If you can, inspect the accessibility tree too; appearance alone does not tell the whole story.
Try a different way of reading. Read only the headings and labels, or navigate through links without looking at the rest of the page. If the page still makes sense, the underlying HTML is probably doing an important part of its job.
Your Turn
Remove the label and see why the purpose of the field becomes harder to remember.
Common Beginner Mistakes
- Judging the page only by how it looks, without checking its meaning and keyboard behavior.
- Typing clears the placeholder on many browsers, so users can lose the prompt.
Key Takeaways
- Placeholder text disappears as someone types and may be difficult to read.
- <label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
- Remember that HTML form rules help the visitor, but server-side code must decide whether received data is valid.