Placeholder — не подпись
Почему исчезающие подсказки не подходят реальным пользователям
«Placeholder — не подпись» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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. 💡
Часто задаваемые вопросы
Урок «Placeholder — не подпись» бесплатный?
Да — полный текст урока «Placeholder — не подпись» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Placeholder — не подпись»?
Почему исчезающие подсказки не подходят реальным пользователям Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Placeholder — не подпись»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Каждому input нужен настоящий label
- Placeholder — не подпись
- Группировка полей с помощью fieldset и legend
- Объявление справочного текста и обязательных полей