HTMLImageElement: свойство alt

Свойство HTMLImageElement alt предоставляет резервный (альтернативный) текст для отображения, когда изображение, указанное элементом <img>, не загружается.

Это может быть связано с ошибкой, отключением пользователем загрузки изображений или тем, что изображение еще не загрузилось.

Возможно, самая важная причина использования свойства alt — это поддержка доступности, так как текст alt может использоваться средствами чтения с экрана и другими вспомогательными технологиями для обеспечения полного доступа к вашему контенту людям с ограниченными возможностями. Например, этот текст будет прочитан вслух или переведён в шрифт Брайля для поддержки слепых или слабовидящих пользователей.

Представьте это так: выбирая alt для своих изображений, представьте, что вы читаете страницу по телефону, не упоминаю о наличии изображений на странице.

Альтернативный текст отображается в месте, где должно было быть изображение, и должен быть способен заменить изображение без изменения смысла страницы.

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

Атрибут alt является официально обязательным; он предназначен для того, чтобы всегда указываться. Если для изображения не требуется резервный текст (например, для декоративного изображения или значка с минимальной важностью), можно указать пустую строку (""). По соображениям совместимости браузеры обычно принимают изображение без атрибута alt, но рекомендуется привыкнуть к его использованию.

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

Помимо этого, существуют дополнительные рекомендации по правильному использованию alt, которые зависят от того, для чего используется изображение. Эти рекомендации показаны в примерах ниже.

Изображения без семантического значения — такие, которые используются только для украшения, или с ограниченной информационной ценностью, должны иметь атрибуты alt, установленные в пустую строку (""). Это показано в примере ниже.

HTML

В HTML-примере ниже элемент <img> включает свойство alt, что предотвратит появление альтернативного текста для изображения, поскольку это декоративный элемент.

<div class="container">
  <div class="left-margin">
    <img src="margin-flourish.svg" alt="" />
  </div>
  <div class="contents">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci
      ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
      neque libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar
      ex id sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus
      laoreet cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus
      scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu.
    </p>
  </div>
</div>

CSS

CSS-стили в этом примере задают параметры макета, как показано ниже в результате.

body {
  margin: 0;
  padding: 0;
}

p {
  margin-block-start: 0;
  margin-block-end: 1em;
  margin-top: 0;
  margin-bottom: 1em;
}

.container {
  width: 100vh;
  height: 95vh;
  font:
    16px Arial,
    Helvetica,
    sans-serif;
}

.left-margin {
  background-color: rgb(241 240 237);
  width: 9em;
  height: 100%;
  float: left;
  margin-right: 5px;
  padding-right: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-margin img {
  width: 6em;
}

.contents {
  background-color: rgb(241 240 235);
  height: 100%;
  margin-left: 2em;
  padding-top: 1em;
  padding-left: 2em;
  padding-right: 1em;
}

Результат

При использовании изображения в качестве кнопки (путем его использования в качестве единственного видимого потомка элемента <a>, представляющего гиперссылку), атрибут alt должен передавать назначение кнопки. То есть, он должен быть таким же, как текст, используемый в текстовой кнопке для выполнения той же задачи.

Например, в приведённом ниже фрагменте HTML панель инструментов, использующая значки в качестве меток ссылок, предоставляет атрибуты alt для каждого значка, предоставляя текстовую метку для использования вместо значка, когда значки не могут быть или намеренно не используются.

<li class="toolbar" role="toolbar">
  <a href="songs.html" role="button">
    <img src="songicon.svg" alt="Songs" />
  </a>
  <a href="albums.html" role="button">
    <img src="albumicon.svg" alt="Albums"
  /></a>
  <a href="artists.html" role="button">
    <img src="artisticon.svg" alt="Artists" />
  </a>
  <a href="playlists.html" role="button">
    <img src="playlisticon.svg" alt="Playlists" />
  </a>
</li>

Когда изображение содержит информацию, представленную в виде диаграммы, графика, графика или карты, текст alt должен содержать ту же информацию, по крайней мере, в сводном виде. Это относится как к растровым изображениям, таким как PNG или JPEG, так и к векторным изображениям, таким как SVG.

• Для карты текст alt может содержать описание маршрута к месту, указанному на карте, подобно тому, как вы бы это объяснили устно.
• Для графика текст может описывать элементы графика и их значения.
• Для диаграммы текст может содержать объяснение концепции, представленной диаграммой.

Следует учитывать, что любой текст, включенный в диаграммы и графики, представленные в формате SVG, может быть прочитан средствами чтения с экрана. Это может повлиять на решения, которые вы принимаете при написании текста alt для диаграммы.

Логотипы (например, корпоративные или фирменные логотипы) и информационные значки должны использовать соответствующий текст в своих строках alt. То есть, если изображение является корпоративным логотипом, текст alt должен содержать название компании. Если изображение является значком, представляющим состояние или другую информацию, текст должен содержать название этого состояния.

Например, если изображение представляет собой значок, отображаемый на странице для обозначения того, что контент страницы новый и недавно обновлен, соответствующий текст alt может быть "Updated Recently" или даже "Updated on 27 August 2019".

В данном примере изображение в виде лучей с надписью «Новинка!» используется для обозначения того, что статья посвящена чему-то новому (и, вероятно, также захватывающему). Атрибут alt установлен в значение New Page!, чтобы этот текст мог отображаться вместо изображения, если изображение недоступно. Он также доступен для чтения средствами чтения с экрана.

HTML

HTML-фрагмент ниже создает фрагмент контента с сайта, использующего описанную иконку. Обратите внимание на использование атрибута alt в элементе <img>, что обеспечивает хорошую заменяющую строку для использования в случае отсутствия изображения.

<div class="container">
  <img
    src="https://www.bitstampede.com/mdn-test/new-page.svg"
    alt="New Page!"
    class="pageinfo-badge" />
  <p class="contents">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis orci
    ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac neque
    libero. Vivamus consectetur rhoncus elit eget porta. Etiam pulvinar ex id
    sapien laoreet, quis aliquet odio lobortis. Nam ac mauris at risus laoreet
    cursus vitae et sapien. Etiam molestie auctor eros, ac porta risus
    scelerisque sit amet. Ut nunc neque, porta eu auctor at, tempor et arcu.
  </p>
</div>

CSS

Основной особенностью CSS здесь является использование clip-path и shape-outside для обёртывания текста вокруг значка привлекательным образом.

.container {
  max-width: 500px;
}

.pageinfo-badge {
  width: 9em;
  padding-right: 1em;
  float: left;
  clip-path: polygon(
    100% 0,
    100% 50%,
    90% 70%,
    80% 80%,
    70% 90%,
    50% 100%,
    0 100%,
    0 0
  );
  shape-outside: polygon(
    100% 0,
    100% 50%,
    90% 70%,
    80% 80%,
    70% 90%,
    50% 100%,
    0 100%,
    0 0
  );
}

.contents {
  margin-top: 1em;
  font:
    16px Arial,
    Helvetica,
    Verdana,
    sans-serif;
}

Результат

Изображения, показывающие объекты или сцены, должны иметь текст alt, описывающий то, что видно на изображении. Фотография желтого чайника может буквально иметь свой атрибут alt установленным в значение "A yellow teapot".