Inaccessible Design - Form Labels Lab

The Inaccessible Twin: The Vanishing Context Trap

This form represents the "clean, minimalist" anti-pattern that causes 51% of forms to fail basic accessibility checks. It relies entirely on the HTML placeholder attribute instead of semantic <label> elements.

🧪 Lab Experiment: Click into the first box, type your first name, then hit the "Tab" key. Now, pretend you got distracted by a text message and look away. Look back at the screen: What is the empty box for? Email? Address? Phone number? Because there are no persistent labels, the context has vanished entirely.

Checkout Details

Please fill out your shipping information below.

🔊 Screen Reader Output when tabbing back to a partially filled field:
"Jane, edit text."

[Because there is no permanent `<label>`, the screen reader only announces the text currently inside the box. The user hears their own name, but has no idea if this field was supposed to be "First Name", "Full Name", or "Username". The accessibility tree lost its semantic name the moment the placeholder vanished.]