0Pricing
Web Accessibility Academy · 课时

占位符不是标签

了解会消失的提示为何无法真正帮助用户

占位符不是标签 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 2 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译,以英文显示。

The Tempting Shortcut

It is tempting to drop hint text in a field and skip the label. But a placeholder is a hint, not a name. ⚠️

It Disappears

The moment someone starts typing, the placeholder vanishes. Now there is nothing left to say what the field was for.

<input type="text" placeholder="Full name">

Memory Burden

Users with memory or attention challenges have to remember the hint after it is gone. A persistent label removes that load.

Low Contrast by Default

Placeholder text is usually light gray, which often fails contrast rules. Low-vision users may not read it at all.

Looks Filled In

Gray hint text can read as an already-filled value. People skip the field, then a required error surprises them.

Inconsistent for Screen Readers

Screen reader support for placeholder as a name is patchy and varies by browser. You cannot rely on it being announced.

Use Both, Not Either

Placeholders are fine as extra hints, like a format example. Pair them with a real label, never use them alone.

<label for="phone">Phone</label>
<input id="phone" placeholder="555-0100">

Format Examples Shine Here

A placeholder is great for a format example like a date pattern. The label still carries the field's actual name.

Floating Labels

Floating labels slide up when you type, keeping the name visible. They are a real label, just animated, so they pass.

Test by Filling It

Quick check: type into the field. If you can no longer tell what it wants, the placeholder was doing a label's job.

WCAG Backs This Up

WCAG's Labels or Instructions criterion expects a clear, persistent name. Placeholder-only fields routinely fail audits.

Quick Check

Why is a placeholder a poor replacement for a label?

Recap

A placeholder is a fading hint, not a name. Keep a real label and use placeholders only for extra format help. 💡

常见问题解答

「占位符不是标签」课时是免费的吗?

是的 — 「占位符不是标签」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Web Accessibility Academy 课程的其余内容,请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。

「占位符不是标签」这节课中我会学到什么?

了解会消失的提示为何无法真正帮助用户 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Accessibility Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 2 节课,共 4 节。

「占位符不是标签」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Web Accessibility Academy 课中编写并运行代码吗?

能。每节 Web Accessibility Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 每个输入控件都需要真正的 label
  2. 占位符不是标签
  3. 使用 fieldset 和 legend 对字段分组
  4. 朗读帮助文本和必填字段
← 返回 Web Accessibility Academy