Правильное использование атрибута alt в изображениях
- Для чего нужен HTML?
- пример
- Как правильно использовать ALT в изображениях
- Пример 1 (справа!): С объявленным alt и заполненным пустым
- Пример 2 (справа!): С объявленным и заполненным alt
- Пример 3 (НЕПРАВИЛЬНО): с объявленным alt, но нулевым
- Пример 4 (НЕПРАВИЛЬНО): не объявлено alt
- Понять, почему объявить заполненный alt пустым
- При заполнении атрибута HTML alt text
- Совет: выделите все изображения без альтернативного HTML!
- ссылки
Описание: Любой, кто работает с SEO, знает, что атрибут HTML ALT важен в теге изображения. Использование его в беспорядке вредно даже при доступе слепых к сайту.
Для чего нужен HTML?
ALT происходит от "альтернативного" английского языка. То есть это альтернатива контенту, отображаемому на изображении.
Это работает для:
- Опишите в тексте ориентацию относительно изображения, которое не отображается;
- Поисковые системы понимают, о чем идет речь, и это помогает проиндексировать страницу;
- Программы чтения с экрана аудио указывают, о чем идет речь (сюда входят инструменты, которые слепые люди используют для веб-серфинга. Если вы хотите узнать больше о программах чтения с экрана компьютера, я рекомендую вам взглянуть на это статья "6 программ чтения с экрана для вашего компьютера". )
пример
Я сделал отзывчивую подпись электронной почты для клиента, используя изображения + текст. Посмотрите на изображения, которые выглядят нормально:
Теперь посмотрим, как это выглядит, когда изображения не загружены из-за проблем с сервером, блокировки изображений, отсутствия подключения к Интернету и т. Д.
Чтобы информация об имени не терялась в подписи электронной почты, я вставил текст «Доктор Пауло Сезар Мальдонадо »в альт -образе, который показывает его имя. Таким образом, его название в качестве альтернативного текста отображается при отсутствии изображения и также может интерпретироваться программами чтения с экрана.
Хотя размер некоторых изображений невелик, и вы не можете прочитать их alt , программы чтения с экрана на экране настроены на чтение: «Доктор Пауло Сезар Мальдонадо "с или без проблем с отображением изображения.
Кроме того, на веб-сайте Google будет индексировать страницу для поиска в поиске «Доктор Пауло Сезар Мальдонадо ", который поможет в SEO.
Обратите внимание, что я специально не ставил alt в символе левой метки.
Почему? Это ненужно.
Считаете ли вы уместным услышать описание с надписью «пометить» или даже проиндексировать это слово на веб-странице?
Это подводит нас к следующей теме.
Как правильно использовать ALT в изображениях
Все изображения должны иметь объявленный атрибут alt . Это семантически обозначено HTML и повышает удобство использования пользователями цифровых аудиоплееров. Но ВАЖНО: Объявление атрибута отличается от его заполнения .
Примеры изображения HTML:
Пример 1 (справа!): С объявленным alt и заполненным пустым
<img src = "brand-name-dr-paulo-cezar-maldonado.gif" alt = "" />
Пример 2 (справа!): С объявленным и заполненным alt
<img src = "фирменное наименование-dr-paulo-cezar-maldonado.gif" alt = "доктор Пауло Сезар Мальдонадо " />
Пример 3 (НЕПРАВИЛЬНО): с объявленным alt, но нулевым
<img src = "brand-name-dr-paulo-cezar-maldonado.gif" alt = "" />
Пример 4 (НЕПРАВИЛЬНО): не объявлено alt
<img src = "brand-name-dr-paulo-cezar-maldonado.gif" />
Понять, почему объявить заполненный alt пустым
Прочитайте этот отрывок из доклада (2) о доступности для слепых на веб-страницах:
Атрибут изображения «ALT» должен использоваться со здравым смыслом и исходя из следующей идеи: все, что написано на нем, будет слышно всегда, когда программа чтения с экрана проходит через него. Таким образом, изображения, которые не имеют функции, которая служит только украшением на экране, как изображения горизонтальных линий, горошек и декоративных и разноцветных квадратов, рамок, должны поставляться с «ALT empty», то есть с пробелом между кавычками , Это отличается от "ALT null", который является альтернативой "", т.е. между кавычками нет пробела. Как уже сказано в названии, «нулевой alt» - это как если бы не было alt, а «пустой alt» - это alt с содержимым, но пустой.
Эта небольшая разница меняет чтение, которое делает программа чтения с экрана. С пустым alt он абсолютно ничего не читает, в то время как с этим null некоторые читатели пытаются прочитать содержимое атрибута src, то есть пытаются прочитать имя изображения.
Источник: Как сделать доступным на страницах WEB., Марко Антонио де Кейроз - MAQ, 29/08/2002 http://www.bengalalegal.com/acesso
При заполнении атрибута HTML alt text
Если все приведенные ниже пункты верны для вас, заполните атрибут alt изображения кратким и ясным описанием того, что оно представляет:
- Это не просто эстетический орнамент
- Отсутствие изображения делает контент менее понятным и полным
- Изображение содержит текст, который находится только в нем (в этом случае вы должны кратко переписать текст в alt )
Если это не так, обязательно всегда объявляйте атрибут alt HTML, заполненный пробелом , например так:
alt = ""
Совет: выделите все изображения без альтернативного HTML!
Рикардо Санчес опубликовал видео с кодом, который автоматически накладывает красные рамки на изображения без альт, и вы не забудьте объявить их в HTML! см:
ссылки
- «Атрибут HTML <img> alt » https://www.w3schools.com/tags/att_img_alt.asp
- «Как обеспечить доступность на веб-страницах» http://www.bengalalegal.com/acesso
- «Вы никогда не забудете ALT снова» https://www.portalgsti.com.br/2018/01/voce-nunca-mais-va-esquecer-do-alt.html
Посмотрите, что еще вас интересует:
Выпускник MBA в области маркетинга и брендинга и окончил в дизайн Графический, он работал главным образом операционным менеджером, менеджером проектов и веб-разработчиком. Имеет опыт в планировании и разработке мобильных приложений, разработке пользовательского интерфейса и специализации как программист и разработчик веб-сайтов с использованием HTML5, CSS3, jQuery, PHP, MySQL и WordPress ,
Для чего нужен HTML?Для чего нужен HTML?
Почему?
Считаете ли вы уместным услышать описание с надписью «пометить» или даже проиндексировать это слово на веб-странице?