W3docs
ru
Войти

HTML-атрибут alt

Атрибут alt задаёт альтернативный текст для изображения. Узнайте, как правильно его писать и как он работает на разных элементах.

HTML-атрибут alt предоставляет текстовую альтернативу для изображения (или элемента, схожего с изображением). Он зачитывается программами чтения с экрана и отображается вместо изображения, если оно не загрузилось. На этой странице объясняется, как должен выглядеть хороший альтернативный текст, как alt работает на каждом поддерживаемом элементе и каких ошибок следует избегать.

Атрибут alt можно использовать на следующих элементах: <area>, <img> и <input type="image">.

Зачем нужен alt-текст

Атрибут alt выполняет три задачи одновременно:

  • Доступность. Пользователи программ чтения с экрана не видят изображение — для них alt-текст и есть само изображение. Описание содержимого позволяет им следить за страницей. Осмысленный alt — это то, что делает изображение доступным.
  • Запасной вариант при недоступном изображении. Если файл изображения отсутствует, путь указан неверно или соединение медленное, браузер показывает alt-текст вместо пустого блока. Это сохраняет удобство использования страницы.
  • SEO (небольшой бонус). Поисковые системы читают alt-текст, чтобы понять, что изображено на картинке, — это помогает в поиске изображений. Воспринимайте это как приятный побочный эффект — пишите alt для людей, а не ради вставки ключевых слов.
Опасно

Для элемента <img> атрибут alt обязателен. Его полное отсутствие является нарушением доступности: программа чтения с экрана будет объявлять имя файла, что редко бывает полезным. Пустой alt="" — это намеренный, допустимый выбор для декоративных изображений; он не равнозначен отсутствию alt.

Как писать хороший alt-текст

Старайтесь описывать изображение так, как вы описали бы его человеку, который не может его увидеть, — с учётом окружающего контекста.

  • Будьте описательны и конкретны, но лаконичны — примерно 125 символов или меньше. Программы чтения с экрана могут неудобно прерываться на очень длинном альтернативном тексте.
  • Не начинайте с «изображение» или «картинка». Программы чтения с экрана уже сообщают, что это изображение, поэтому такой префикс избыточен.
  • Передавайте функцию или содержание, важное в данном контексте, а не каждую визуальную деталь.
  • Пропускайте alt-текст для чисто декоративных изображений, используя alt="" (см. ниже).

Хороший и плохой alt-текст

На примере одной и той же фотографии золотистого ретривера, ловящего фрисби в парке:

<!-- Bad: vague, redundant prefix, or just the file name -->
<img src="dog.jpg" alt="image" />
<img src="dog.jpg" alt="dog.jpg" />
<img src="dog.jpg" alt="picture of a dog" />

<!-- Good: describes what the image shows, in context -->
<img src="dog.jpg" alt="A golden retriever leaping to catch a frisbee in a park" />

Декоративные изображения: используйте пустой alt

Если изображение не несёт никакой информации — разделитель, декоративный элемент фона, иконка рядом с текстом, который уже говорит то же самое — задайте ему пустой alt="". Это указывает программам чтения с экрана полностью пропустить изображение вместо того, чтобы объявлять имя файла.

<!-- Decorative divider: nothing meaningful to announce -->
<img src="ornament.png" alt="" />

<!-- Icon next to text that already conveys the meaning -->
<button>
  <img src="trash.svg" alt="" /> Delete
</button>
Информация

Запомните разницу: alt="" = «это изображение декоративное, пропустить его». Отсутствие alt вообще = ошибка, которая лишает пользователей программ чтения с экрана какой-либо альтернативы.

Синтаксис

<img src="photo.jpg" alt="alternative text">
<area alt="alternative text">
<input type="image" alt="button action">

Атрибут alt на элементе <area>

В карте изображения каждая кликабельная <area> действует как ссылка, поэтому её alt должен описывать куда ведёт эта область — так же, как вы написали бы текст ссылки. Каждая <area> нуждается в собственном, отличном от других alt; повторное использование одного значения для разных назначений не позволяет пользователям различить области.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo to open a topic:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="W3docs topic logos" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="HTML logo" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="CSS logo" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="PHP logo" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="W3docs home page" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>
Попробуйте сами »

Атрибут alt на элементе <img>

Это наиболее распространённый случай использования. Опишите, что изображено на картинке, в контексте страницы. Если у изображения есть видимая подпись, рассмотрите вариант оборачивания в <figure> с <figcaption>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A young woman smiling at the camera outdoors" width="200" height="185"/>
  </body>
</html>
Попробуйте сами »

Атрибут alt на элементе <input type="image">

Элемент <input type="image"> является графической кнопкой отправки формы. Здесь alt должен описывать действие кнопки, а не саму картинку — например alt="Submit" или alt="Search" — потому что именно это нужно знать пользователю, когда изображение не загружается. Атрибут alt допустим на <input> только при type="image".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit">
      Email:
      <input type="email" name="Email" />
      <input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit" width="60" height="60" />
    </form>
  </body>
</html>
Попробуйте сами »

Практика

Практика
Какова цель атрибута 'alt' в HTML?
Какова цель атрибута 'alt' в HTML?

Связанные темы

Was this page helpful?