Alt img: Атрибут alt | htmlbook.ru

alexxlab

HTML/Атрибут alt (Элемент img)

Синтаксис

HTML

XHTML

<img src="..." alt="[значение]">

Описание

Атрибут / параметр alt (от англ. «alternate text» ‒ «альтернативный текст») указывает альтернативный текст с описанием изображения для браузеров, которые по тем или иным причинам не могут отображать изображения.

Примечание

  • Как правило, не отображают изображения только специальные (речевые или текстовые) браузеры. Обычные браузера так же могут не отображать изображения (в единичном случае, если указанное изображение недоступно; массово, если в браузере установлены соответствующие настройки, например, это делается для увеличения скорости загрузки web-страниц).
  • В случае отсутствия изображения обычные браузеры вместо указанного изображения выводят альтернативный текст.
  • Язык альтернативного текста определяется глобальным атрибутом «lang».

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2.0Image: IMGПеревод
3.2IMG — inline images
4.0113.8 How to specify alternate text
alt = text [CS]…
DTD: Transitional Strict Frameset
5.0
4. 7.1 The img element
the alt attribute…
5.14.7.5. The img element
the alt attribute…
XHTML
1.0Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1Extensible HyperText Markup Language

Значения

В качестве значения указывается альтернативный текст.

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>

<title>Параметр alt (Элемент img)</title>
</head>
<body>
<h2>Пример с атрибутом «alt»</h2>
<p><img src=»/examples/images/dark_clouds. jpg» alt=»Дождевая туча»></p>
</body>
</html>

Параметр alt (Элемент img)

alt атрибут HTML теґа img

  • Головна
  • html
  • теґи
  • <img>
  • alt

Атрибут alt вказує альтернативний текст для зображення, якщо зображення не може бути відображено.

HTML атрибут alt обов’язково повинен бути вказаний.

Атрибут alt додає альтернативну інформацію до зображення, якщо користувач з якихось причин не може його побачити (через повільне з’єднання, помилка в атрибуті src чи показ зображень вимкнено).

Також атрибут

alt допомагає пошуковим системам визначити вміст зображення.

Порада:

Щоб створити підказку для зображення, використовуйте атрибут title!

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтаксис

<img alt="text">

Атрибут alt може отримувати єдине значення :

text

Визначає альтернативний текст для зображення. Рекомендації для альтернативного тексту:

  • Текст повинен описати зображення, якщо зображення містить інформацію.
  • Текст повинен пояснити, куди направляє посилання, якщо зображення знаходиться всередині елемента <a>.
  • Використовуйте alt = «», якщо зображення тільки для прикраси.

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач

1+

1+

1+

1+

1+

12+

Переглядач

1+

1+

1+

1+

Приклади

  • Приклад 1

Приклад використання HTML атрибута alt теґа <img>

 alt_css_in_ua">


  See the Pen 


  img.alt_css_in_ua by css.in.ua (@css_in_ua)


  on CodePen.

Різниця між HTML 4.01 та HTML5

Немає

Різниця між XHTML та HTML

Немає жодної різниці.

Анализ доступности — image-alt

Назад к информации и примерам анализа доступности для Интернета

Элемент должен иметь альтернативный текст.

Почему это важно

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

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

Как исправить

  1. Определить, является ли изображение значимым или декоративным:

    • Изображение является значимым , если оно передает информацию, недоступную через другое содержимое страницы.
    • Изображение декоративное , если его можно было бы удалить со страницы с без влияния
      на значение или функцию.

  2. Если элемент является декоративным, укажите пустой атрибут alt ( alt="" ).

  3. Если элемент имеет смысл, укажите описательный альтернативный текст одним из следующих способов:

    Хорошо

    • название атрибут

    Лучше

    • Ария-этикетка
    • ария-помеченная атрибутом

    Лучший

    • альт атрибут

Советы по написанию хороших вариантов текста см. в разделе Предоставление короткого текста для нетекстового контента, который служит той же цели и предоставляет ту же информацию, что и нетекстовый контент.

Пример

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


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

Учителя бастуют перед штаб-квартирой школьного округа

Об этом правиле

Это правило действует если ЛЮБОЕ из следующего верно:

  1. Элемент имеет альт атрибут
  2. Элемент имеет атрибут aria-labeledby , который ссылается на элементы, видимые программам чтения с экрана
  3. Элемент имеет непустой атрибут aria-label
  4. Элемент имеет непустой заголовок атрибут
  5. Семантика элемента по умолчанию была переопределена с помощью role="presentation"
    или role="none"

Будьте осторожны при применении role="presentation" или role="none" на элемент . Эти роли предписывают вспомогательным технологиям игнорировать неявную роль элемента, не скрывая его содержимое от пользователей. Если имеет внутренний текст, добавление роли из презентации или none приведет к тому, что он будет отображаться для пользователей как текстовая строка без семантического контекста. Дополнительные сведения см. в разделе Использование ARIA: использование Role=presentation или Role=none.

Еще примеры

Понимание критерия успеха 1.1.1: Нетекстовое содержимое

Предоставление короткого текста вместо нетекстового содержимого, которое служит той же цели и представляет ту же информацию, что и нетекстовое содержимое content

Изображение, область и кнопка с тегами изображения должны иметь атрибут «alt»

 

Незначительная

Серьезность SonarSource по умолчанию
щелкните, чтобы узнать больше

Атрибут alt предоставляет текстовую альтернативу изображению.

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

Общие причины этого включают:

  • Изображение больше не может быть найдено
  • Пользователи с нарушениями зрения, использующие программу чтения с экрана
  • Загрузка изображений отключена, чтобы уменьшить потребление данных на мобильных телефонах

Также очень важно не устанавливать для атрибута alt неинформативное значение. Например logo бесполезен, так как не дает никакой информации пользователю. В этом случае, как и для любого другого декоративного изображения, лучше использовать фоновое изображение CSS. вместо тег. Если использование фонового изображения CSS невозможно, допускается пустое значение alt="" . См. Исключения рев.

Это правило вызывает проблему, когда

  • тег или тег не имеют атрибута alt или их alt  атрибут имеет пустое строковое значение.
  • тег не имеет атрибута alt .

Пример кода несоответствия 

 
 
 
комнаты дома.
<имя карты="карта1">
  <область shape="прямая" координаты="0,0,42,42"
    href="bedroom.html"/> 
  <область shape="прямая" координаты="0,0,21,21"
    href="lounge.html" alt=""/>

Совместимое решение 

Некоторое текстовое описание foo.png

комнаты дома.
<имя карты="карта1">
  <область shape="прямая" координаты="0,0,42,42"
    href="спальня. html" alt="Спальня" />
  <область shape="прямая" координаты="0,0,21,21"
    href="гостиная.html" alt="Гостиная"/>

Исключения

тегов с пустой строкой alt="" атрибутов не вызовут никаких проблем. Однако эту технику следует использовать в только два случая:

Когда изображение является декоративным и невозможно использовать фоновое изображение CSS. Например, когда декоративный созданный с помощью javascript с исходным изображением, поступающим из базы данных, лучше использовать тег , а не генерировать CSS-код.

  • 
    

    •

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *