Картинки alt: Что такое Alt и Title у картинок и как их правильно заполнить

Содержание

Что такое Alt и Title у картинок и как их правильно заполнить

Михаил Шумовский
27 сентября, 2022

Что такое Alt Что такое Title Что и как писать в атрибутах Alt и Title Чем отличаются Alt и Title Как прописать Alt и Title Как проверить Alt и Title на сайте

Мы в Telegram

В канале «Маркетинговые щи» только самое полезное: подборки, инструкции, кейсы.
Не всегда на серьёзных щах — шуточки тоже шутим =)

Подписаться

Станьте email-рокером 🤘

Пройдите бесплатный курс и запустите свою первую рассылку

Подробнее

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

Но что, если пользователь по каким-то причинам их не видит? Тогда нужно рассказать о том, что на фото. Для этого используют Alt и Title.

Что такое Alt 

Alt — один из атрибутов тега <img> в HTML. По сути, это альтернативное название картинки. Оно отображается, если картинка не прогружается. 

Обычно картинку мы видим так:

Но если изображение не загружается у пользователя, он увидит только текст:

В коде страницы Alt выглядит так:

Атрибут Alt нужно прописывать, чтобы:

Показать читателю, что на картинке. Например, у человека плохой интернет, и картинка не прогружается — Alt поможет понять, что именно изображено.

Например, скриншот ниже — из статьи о том, как оплачивать подписку на VPN. Если бы изображение не подгрузилось, а у картинки не был прописан атрибут Alt, пользователь бы не понял, как выглядит перевод монет.

А так страницу увидит пользователь, если в статье есть Alt атрибуты:

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

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

Вот что про Alt говорит Яндекс:

«Информация из этого атрибута поможет “картиночному” роботу в индексации. Поисковой системе проще понять значение изображения, если для него указан атрибут Alt».

Что такое Title

Title изображения — ещё один атрибут тега <img> в HTML. Это дополнительный параметр, который видит пользователь при наведении курсора на картинку. 

Роботы индексируют этот атрибут так же, как и Alt, но главная задача Title — объяснить пользователю, что изображено на иллюстрации. Получается, Alt описывает пользователю содержимое картинки, а Title объясняет изображение, которое читатель уже увидел.

Так выглядит заполненный Title:

Атрибут Title используют в двух случаях:

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

Нужно повысить рейтинг страницы. Т.к. поисковые роботы проверяют Title, описание с ключевыми словами поможет в ранжировании.

Title для изображений прописывают в виде текста или ссылки (если нужно перевести человека на другой ресурс с картинки). Вот так:

  • Без ссылки. Атрибут указывается перед путём к нему: [img title=»содержание атрибута» src=»путь» /]

Со ссылкой. URL вписывают прямо внутри ссылки:

[a title=»содержание атрибута» href=»ссылка на другую страницу»][img src=»путь» /][/a]

Что и как писать в атрибутах Alt и Title

Есть несколько простых правил, которые помогут заполнить Alt и Title так, чтобы они были полезны и для SEO, и для пользователей.

Не заспамливать. Если альтернативное описание будет в духе «заказать дёшево окна Москва с доставкой под ключ», робот в лучшем случае проигнорирует его. В худшем — пометит как спам и снизит статью в поисковой выдаче.

Использовать ключевые слова. Они обрабатываются роботами и учитываются при индексации страницы. Но не забывайте про переспам: всё должно быть органично и понятно для читателя.

Не делать длинным. Оптимальная длина — до 250 символов. Если получается больше, лучше вынести это в основной текст, а на место атрибута придумать другую подпись.

Дублировать текст с изображения. Актуально для Alt: поисковые роботы пока не умеют распознавать текст, который представлен в виде изображения. Поэтому можно показать скриншот с информацией и кратко описать его в атрибуте.

Чем отличаются Alt и Title
AltTitle
Необходимость для сайтаОбязательноПо желанию
На что влияетНа индексацию статьи и полезное действие контентаНа полезное действие контента
Правила созданияПолезный для читателя, описывает изображение.

Не больше 250 символов.

Должен содержать ключевой запрос.

Не должен быть переспамлен

Полезный для читателя, дополняет изображение.

Не больше 250 символов.

Может содержать ключевой запрос.

Не должен быть переспамлен

Как прописать Alt и Title

Способ зависит от сайта. Если он написан на HTML, придётся добавлять теги вручную. Если ресурс создан на CMS, атрибуты прописываются в редакторе админки.

Создание тегов на вручную. Откройте файловую систему сайта на хостинге или по FTP. В коде сайта найдите иллюстрации по тегу <img> и пропишите Alt и Title.

Вот как это будет выглядеть:

<img src=»Путь к картинке» alt=»Альтернативное описание» title=»полезная информация»>

Создание тегов на CMS. Здесь всё проще. В текстовом редакторе нужно выбрать изображение и вписать информацию в теги. Как это можно сделать в CMS.S3, можно узнать из понятной видеоинструкции. В других CMS и редакторах всё выглядит примерно так же.

Как проверить Alt и Title на сайте

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

Отключить отображение картинок. Так увидите, есть ли теги Alt. Чтобы отключить отображение картинок в Google Chrome, зайдите в «Настройки браузера» → «Конфиденциальность и безопасность» → «Настройки сайтов» → «Контент» → «Картинки» → «Запретить сайтам показывать изображения».

В браузере Firefox картинки отключаются по-другому.

Сначала в поисковую строку пишем about:config, переходим по ссылке и соглашаемся с рисками.

В новой поисковой строке вводим permissions.default.image и дважды щёлкаем по открывшейся строке.

Навести курсор на изображение. Подходит только для Title. 

Проверить атрибуты Alt и Title через код.

Для этого нужно:

  • нажать клавиши Ctrl+Shift+C;
  • кликнуть на изображение;
  • проверить атрибуты.

Проверить атрибуты через сервисы. Сервисы-анализаторы сайтов проверят все теги страниц, в том числе Alt и Title. Для анализа подойдёт сайт PR-CY или его аналоги.

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Что такое Alt и Title у картинок и как их правильно заполнить

Михаил Шумовский
27 сентября, 2022

Что такое Alt Что такое Title Что и как писать в атрибутах Alt и Title Чем отличаются Alt и Title Как прописать Alt и Title Как проверить Alt и Title на сайте

Мы в Telegram

В канале «Маркетинговые щи» только самое полезное: подборки, инструкции, кейсы.
Не всегда на серьёзных щах — шуточки тоже шутим =)

Подписаться

Станьте email-рокером 🤘

Пройдите бесплатный курс и запустите свою первую рассылку

Подробнее

Изображения в статье или на сайте помогают улучшить контент, сделать его более полезным и понятным для читателя. Но что, если пользователь по каким-то причинам их не видит? Тогда нужно рассказать о том, что на фото. Для этого используют Alt и Title.

Что такое Alt 

Alt — один из атрибутов тега <img> в HTML. По сути, это альтернативное название картинки. Оно отображается, если картинка не прогружается. 

Обычно картинку мы видим так:

Но если изображение не загружается у пользователя, он увидит только текст:

В коде страницы Alt выглядит так:

Атрибут Alt нужно прописывать, чтобы:

Показать читателю, что на картинке. Например, у человека плохой интернет, и картинка не прогружается — Alt поможет понять, что именно изображено.

Например, скриншот ниже — из статьи о том, как оплачивать подписку на VPN. Если бы изображение не подгрузилось, а у картинки не был прописан атрибут Alt, пользователь бы не понял, как выглядит перевод монет.

А так страницу увидит пользователь, если в статье есть Alt атрибуты:

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

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

Вот что про Alt говорит Яндекс:

«Информация из этого атрибута поможет “картиночному” роботу в индексации. Поисковой системе проще понять значение изображения, если для него указан атрибут Alt».

Что такое Title

Title изображения — ещё один атрибут тега <img> в HTML. Это дополнительный параметр, который видит пользователь при наведении курсора на картинку.

 

Роботы индексируют этот атрибут так же, как и Alt, но главная задача Title — объяснить пользователю, что изображено на иллюстрации. Получается, Alt описывает пользователю содержимое картинки, а Title объясняет изображение, которое читатель уже увидел.

Так выглядит заполненный Title:

Атрибут Title используют в двух случаях:

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

Нужно повысить рейтинг страницы. Т.к. поисковые роботы проверяют Title, описание с ключевыми словами поможет в ранжировании.

Title для изображений прописывают в виде текста или ссылки (если нужно перевести человека на другой ресурс с картинки). Вот так:

  • Без ссылки. Атрибут указывается перед путём к нему: [img title=»содержание атрибута» src=»путь» /]

Со ссылкой. URL вписывают прямо внутри ссылки: [a title=»содержание атрибута» href=»ссылка на другую страницу»][img src=»путь» /][/a]

Что и как писать в атрибутах Alt и Title

Есть несколько простых правил, которые помогут заполнить Alt и Title так, чтобы они были полезны и для SEO, и для пользователей.

Не заспамливать. Если альтернативное описание будет в духе «заказать дёшево окна Москва с доставкой под ключ», робот в лучшем случае проигнорирует его. В худшем — пометит как спам и снизит статью в поисковой выдаче.

Использовать ключевые слова. Они обрабатываются роботами и учитываются при индексации страницы. Но не забывайте про переспам: всё должно быть органично и понятно для читателя.

Не делать длинным. Оптимальная длина — до 250 символов. Если получается больше, лучше вынести это в основной текст, а на место атрибута придумать другую подпись.

Дублировать текст с изображения. Актуально для Alt: поисковые роботы пока не умеют распознавать текст, который представлен в виде изображения. Поэтому можно показать скриншот с информацией и кратко описать его в атрибуте.

Чем отличаются Alt и Title
AltTitle
Необходимость для сайтаОбязательноПо желанию
На что влияетНа индексацию статьи и полезное действие контентаНа полезное действие контента
Правила созданияПолезный для читателя, описывает изображение.

Не больше 250 символов.

Должен содержать ключевой запрос.

Не должен быть переспамлен

Полезный для читателя, дополняет изображение.

Не больше 250 символов.

Может содержать ключевой запрос.

Не должен быть переспамлен

Как прописать Alt и Title

Способ зависит от сайта. Если он написан на HTML, придётся добавлять теги вручную. Если ресурс создан на CMS, атрибуты прописываются в редакторе админки.

Создание тегов на вручную. Откройте файловую систему сайта на хостинге или по FTP. В коде сайта найдите иллюстрации по тегу <img> и пропишите Alt и Title.

Вот как это будет выглядеть:

<img src=»Путь к картинке» alt=»Альтернативное описание» title=»полезная информация»>

Создание тегов на CMS. Здесь всё проще. В текстовом редакторе нужно выбрать изображение и вписать информацию в теги. Как это можно сделать в CMS.S3, можно узнать из понятной видеоинструкции. В других CMS и редакторах всё выглядит примерно так же.

Как проверить Alt и Title на сайте

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

Отключить отображение картинок. Так увидите, есть ли теги Alt. Чтобы отключить отображение картинок в Google Chrome, зайдите в «Настройки браузера» → «Конфиденциальность и безопасность» → «Настройки сайтов» → «Контент» → «Картинки» → «Запретить сайтам показывать изображения».

В браузере Firefox картинки отключаются по-другому.

Сначала в поисковую строку пишем about:config, переходим по ссылке и соглашаемся с рисками.

В новой поисковой строке вводим permissions.default.image и дважды щёлкаем по открывшейся строке.

Навести курсор на изображение. Подходит только для Title. 

Проверить атрибуты Alt и Title через код. Для этого нужно:

  • нажать клавиши Ctrl+Shift+C;
  • кликнуть на изображение;
  • проверить атрибуты.

Проверить атрибуты через сервисы. Сервисы-анализаторы сайтов проверят все теги страниц, в том числе Alt и Title. Для анализа подойдёт сайт PR-CY или его аналоги.

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Как запустить email-маркетинг с нуля?

В бесплатном курсе «Rock-email» мы за 15 писем расскажем, как настроить email-маркетинг в компании. В конце каждого письма даем отбитые татуировки об email ⚡️

*Вместе с курсом вы будете получать рассылку блога Unisender

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Альтернативные картинки | Скачать бесплатные изображения на Unsplash

Альтернативные картинки | Скачать бесплатные изображения на Unsplash
  • A Photophotos 244
  • А Unsplash+

    В сотрудничестве с Фаруком Токлуоглу

    Unsplash+

    Разблокировать

    rockBest stone images & images

    Keanu K

    Hd серые обоиdisneyold

    –––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

    Patrick Federi

    zürichalt-wiedikonschweiz

    Dan Senior

    Tree images & picturesparkHd emo wallpapers

    Alexas_Fotos

    wählscheibekommunikationbaujahr 1955

    Manuel H

    laubbaumherbstwald

    Unsplash logo

    Unsplash+

    In collaboration with Carles Rabada

    Unsplash+

    Unlock

    Nature imageswoodlandalt àneu

    Joachim Schnürle

    Vintage backgroundsHd retro wallpaperstintenfass

    Max Kleinen

    Hd black wallpapersdoordunkel

    witchkingblogs

    tattooed manTattoo images & picturestattooed

    Dan Старший

    Hd темные обоипортретбоке

    witchkingblogs

    очкиДевушки фото & изображенияЖенщины фото

    Unsplash logo

    Unsplash+

    In collaboration with Carles Rabada

    Unsplash+

    Unlock

    aerial viewHq background imagesdrone view

    Joachim Schnürle

    Hd green wallpaperstintebibel

    30daysreplay

    deutschlandmünsterbuilding

    Paul Meckes

    lohmenbasteibridge

    germanyleipzigCar фото и картинки

    Max Kleinen

    HD картинкиHD windows обоиschwarzweiss

    Unsplash logo

    Unsplash+

    In collaboration with Carles Rabada

    Unsplash+

    Unlock

    Hd snow wallpapersoutdoorsroad

    Patrick Pahlke

    bikeWinter images & picturescolourful

    rockBest stone pictures & images

    Tree images & picturesparkHd emo wallpapers

    Природа фотолес лесalt àneu

    HD черные обоидверьdunkel

    HD темные обоипортретбоке

    deutschlandmünsterbuilding

    lohmenbasteibridge

    HD снежные обоиoutdoorsroad

    велосипедЗимние изображения и картинкикрасочные

    –––– –––– –––– ––––– –––– –– – –– –––– – – –– ––– –– –––– – –. 19550011

    GlassEsgirls Фотографии и изображения Women Images & Pictures

    Aerial ViewHQ фоновый изображение.

    Salò ALT

    250 фото · Куратор Marie-Charlotte Udkte0011

    rockBest stone pictures & images

    laubbaumherbstwald

    tattooed manTattoo images & picturestattooed

    glassesGirls photos & imagesWomen images & pictures

    deutschlandmünsterbuilding

    germanyleipzigCar images & pictures

    bikeWinter images & picturescolourful

    Hd grey wallpapersdisneyold

    wählscheibekommunikationbaujahr 1955

    Природа фотоwoodlandalt àneu

    Hd темные обоиportraitbokeh

    lohmenbasteibridge

    Hd снежные обоиoutdoorsroad

    –––– –––– –––– – –––– – –––– –– –– –––– – – –– – –– –– –––– – –.

    Zürichalt-Wiedikonschweiz

    деревьев изображения и Picturesparkhd Emo обои

    Vintage Founalshd Retro Wallpaperstintenfass

    HD Black Wallpapersdoordunkel

    Связанные коллекции

    9017 9011.

    830117011. 830117. 83011 9011. 9011. Связанный ARI 9011 9017 9011

    011701170117. 830117011 9011. 9011. Связанный ARI.0011

    alt

    119 photos · Curated by karakulikati

    Salò ALT

    250 photos · Curated by Marie-Charlotte Udkte

    aerial viewHq background imagesdrone view

    Hd green wallpaperstintebibel

    Hd wallpapersHd windows wallpapersschwarzweiss

    Browse premium images on Istock | Скидка 20% на iStock

    Логотип Unsplash

    Сделайте что-нибудь потрясающее

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

    Для всех

    • Все изображения должны иметь тег ALT, а осмысленные изображения должны иметь альтернативный текст, описывающий их.
      • Альтернативный текст может быть расположен в теге ALT, подписи или окружающем тексте.
    • Описание изображений: напишите эффективный альтернативный текст:
      • Образы со смыслом
        • Контекст имеет значение
        • Изображения с графическим текстом
      • Функциональные образы
        • Связанные изображения
      • Декоративные изображения
    • Использование панелей инструментов с форматированным текстом для добавления замещающего текста

     

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

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

    • Средства чтения с экрана и другие машины (например, поисковые системы) не могут читать изображения и полагаться на текстовые альтернативы.
    • Пользователи со слабым зрением, которым необходимо увеличить экран, зависят от альтернативного текста, который часто масштабируется лучше, чем графический текст.
    • Некоторым пользователям с когнитивными нарушениями текст легче интерпретировать, чем изображения.

    Способы предоставления альтернативного текста

    Все изображения должны иметь тег ALT (также называемый атрибутом ALT). Наиболее распространенный способ добавления альтернативного текста — это тег ALT. Когда вы загружаете изображение на веб-сайт, Canvas или другое цифровое программное обеспечение или платформу, вам обычно предоставляется поле для добавления альтернативного текста изображения в тег ALT. Однако вы можете добавить альтернативный текст двумя другими способами:

    1. В теге ALT
    (наиболее распространенный метод)

    (При загрузке изображения
    добавьте описание в альтернативное текстовое поле
    .)

    2. В окружающем контенте


    развлекались, когда появился
    мужчина в розовой пачке и

    3. В подписи


    Рис. 23. Мужчина в пачке

    Для изображений, описанных в подписях или окружающем контенте, оставьте тег ALT пустым, как и для декоративных изображений. (Базовый код будет выглядеть так:   )

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

    Описание изображений: как написать эффективный альтернативный текст

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

    В настоящее время нет официального ограничения на количество символов или слов, разрешенных в альтернативном тексте. Тем не менее, постарайтесь быть максимально кратким, но при этом передать основную информацию. (Например, не говорите « Изображение библиотеки Хейдена » или «ASU 9».0252 logo «, потому что программы чтения с экрана уже предоставляют эту информацию. Просто напишите: «Библиотека Хейдена» или «ASU»).

    Сложные изображения с большим количеством осмысленного текста, такие как инфографика, карты, графики и диаграммы, используйте как тег ALT, так и атрибут длинного описания, который описан в Руководстве по доступному сложному изображению

    Значимые изображения

    Значимые изображения — это те, которые передают важную или полезную информацию. Они должны быть описаны как можно меньшим количеством слов, не жертвуя смыслом или намерением изображения.

    Сократить описание изображения до самой важной информации может быть сложно. Спросите себя: «Какие ключевые моменты пытается передать изображение?» Хитрость заключается в том, чтобы представить, что вы объясняете изображение по телефону нетерпеливому другу.

    Неэквивалентное содержимое Эквивалентное содержимое

    Ремни безопасности состоят из пряжки и язычка.

    ALT тег: «Ремень безопасности»

    Ремни безопасности состоят из пряжки и язычка.

    ALT-тег: «Вставьте язычок ремня безопасности в замок»

    ALT тег: Футбольные болельщики АСУ.

    ALT-тег: Футбольные трибуны заполнены студентами ASU,
    кричит и показывает рукой жест «Вилка-эм-дьяволы».

    ALT-тег: Студент

    Тег ALT: студент бакалавриата, выполняющий эксперимент
    в химической лаборатории

    Графический текст

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

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

    Изображение с графическим текстом Эквивалентный альтернативный текст
    Хайден 50 — Празднуем наше прошлое, строим наше будущее
    Лучшие колледжи США Новости самых инновационных 2019
    Контекст имеет значение

    При написании альтернативного текста контекст имеет первостепенное значение.

    Например, рассмотрите эту фотографию дома Дэниела Буна. Если окружающий контент представляет собой статью об известных домах по всей стране, может быть достаточно указать дом: «Дом Дэниела Буна в Дефаенсе, штат Миссури». Если статья о 19го века, было бы более уместно сказать: «Дом Дэниела Буна в георгианском стиле в Миссури был построен в 1800 году из отесанных вручную блоков известняка». Опять же, если содержание представляет собой информационный бюллетень клуба, событие может иметь большее значение: «Члены клуба посещают дом Дэниела Буна».

    Пусть контекст определяет, что вы включаете в альтернативный текст.

    Функциональные изображения

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

    Изображение Функция Альтернативный текст
    Функция этого изображения — информировать пользователей о том, что ссылка открывается в новой вкладке или окне — важнее, чем то, как оно выглядит. Открывается в новом окне или вкладке
    Назначение этого изображения — информировать пользователей об ошибке в поле формы — важнее, чем то, как оно выглядит. Ошибка
    Связанные изображения

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

    Изображение Функция Альтернативный текст
    Функция этого изображения как ссылки на https://www.asu.edu важнее, чем его содержание или внешний вид. Домашняя страница АСУ
    Функция этого изображения как ссылки на следующую страницу контента важнее, чем то, как оно выглядит. Следующий

    Декоративные изображения

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

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

    Чтобы определить, является ли изображение декоративным, спросите себя, какая полезная информация была бы потеряна без изображения. Если нет, изображение является декоративным. Например, все изображения ниже являются декоративными.

    Декоративное изображение Причина

    Позвоните нам по телефону 480-965-0000.

    Фото улыбающейся женщины не несет никакой информации и не несет никакой функции. это строго конфетка для глаз .

    Текст выше.

    Текст ниже.

    Горизонтальная линия визуально разделяет содержимое. Он не передает никакой новой информации и не имеет никакой функции или смысла, кроме внешнего вида.
    Не забывайте следить за нашим календарем событий! Изображение используется для визуального выделения блока текста и не имеет реального значения, кроме внешнего вида.

     

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

    Панели инструментов с форматированным текстом (также называемые WYSIWYG или панелями инструментов форматирования), такие как эта из Canvas, значительно упрощают загрузку изображений.

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

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

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

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