Написание alt, передающего назначение, а не пиксели
Описывайте смысл изображения с учётом контекста
«Написание alt, передающего назначение, а не пиксели» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Describe Meaning, Not Looks
Good alt text describes what an image means in context, not a pixel-by-pixel account of every color and shape.
Purpose Over Pixels
Ask why the image is here. The answer is its purpose, and your alt text should deliver exactly that, nothing more.
Skip Image of
Do not start with image of or photo of. Screen readers already announce it is an image, so those words just waste time.
<img src="cat.jpg" alt="A tabby cat asleep on a keyboard">Keep It Tight
Aim for a short, complete phrase, usually under about 125 characters. If you need more, the image may be complex.
Context Changes Everything
The same dog photo might be a breed example or a happy-customer story. Let the surrounding context shape your words.
Images That Are Links
When an image is the only thing inside a link, its alt must describe the link destination, not just the picture.
<a href="/home"><img src="logo.svg" alt="Acme home"></a>Images of Text
If a graphic contains words, your alt text must include all of that text so nothing is lost to non-sighted users.
Do Not Repeat Nearby Text
If a caption right next to the image already says it, an empty alt avoids making screen readers hear it twice.
Write for Equivalence
Imagine reading your alt text aloud to someone on the phone. If they get the same point, you achieved true equivalence.
Avoid Keyword Stuffing
Alt text is not an SEO dumping ground. Cramming in keywords hurts real users and is exactly what good alt avoids.
Punctuation Helps Pacing
End alt text with a period. That small punctuation gives the screen reader a natural pause before moving on.
Quick Check
Pick the strongest alt text below.
Recap
Great progress! Strong alt text captures purpose in a tight phrase, skips image of, respects context, and never stuffs keywords.
Часто задаваемые вопросы
Урок «Написание alt, передающего назначение, а не пиксели» бесплатный?
Да — полный текст урока «Написание alt, передающего назначение, а не пиксели» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Написание alt, передающего назначение, а не пиксели»?
Описывайте смысл изображения с учётом контекста Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Написание alt, передающего назначение, а не пиксели»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Информативное или декоративное: первое решение
- Написание alt, передающего назначение, а не пиксели
- Пустой alt и скрытое декоративное изображение
- Сложные изображения: диаграммы, карты и подробные описания