0Pricing
Web Accessibility Academy · Урок

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 — локальная установка не требуется.

Все уроки этого курса

  1. Каждому input нужен настоящий label
  2. Placeholder — не подпись
  3. Группировка полей с помощью fieldset и legend
  4. Объявление справочного текста и обязательных полей
← Назад к Web Accessibility Academy