Атрибуты ALT и TITLE в HTML: когда, как и для чего их используют

Атрибуты alt и title в HTML играют важную роль в доступности и юзабилити веб-сайтов, а также помогают в поисковой оптимизации (SEO). Вот как и когда их использовать:

Атрибут alt (альтернативный текст)

• Когда использовать: Атрибут alt используется в теге <img> для предоставления альтернативного текста изображениям. Этот атрибут критически важен для доступности, так как он описывает содержание и функцию изображения для пользователей, которые не могут его увидеть (например, для людей, использующих экранные читалки, или в случае, если изображение не может быть загружено).
• Как использовать: Значение alt должно быть кратким и точным описанием изображения. Если изображение содержит текст, атрибут alt должен включать этот текст. Если изображение чисто декоративное, alt может быть оставлен пустым (alt=""), чтобы экранные читалки игнорировали это изображение.
• Пример:
  <img src="logo.png" alt="Логотип компании XYZ">


Атрибут title

• Когда использовать: Атрибут title может быть добавлен к почти любому HTML-элементу, но чаще всего он используется с ссылками (<a>), изображениями (<img>), и ифреймами (<iframe>). title предоставляет дополнительную информацию о элементе или его функции, которая отображается в виде всплывающей подсказки при наведении курсора мыши на элемент.
• Как использовать: Значение title должно быть информативным и дополнительным, предоставляя контекст или описание, которое не является критически важным для понимания содержимого страницы. Для изображений атрибут title может дополнять alt, предоставляя более подробную информацию, которая не обязательна для понимания в контексте документа.
• Примеры:
  <a href="https://example.com" title="Посетите наш новый веб-сайт">На наш сайт</a>
<img src="diagram.png" alt="Диаграмма роста продаж" title="Диаграмма показывает рост продаж за последние три года">


Рекомендации по использованию:

• alt: Всегда используйте атрибут alt для изображений, чтобы обеспечить доступность. Альтернативный текст помогает пользователям понять содержимое страницы, даже если изображения не загружаются или если они используют вспомогательные технологии.
• title: Используйте title для предоставления дополнительной информации, но помните, что всплывающие подсказки могут быть не доступны для всех пользователей, включая тех, кто использует мобильные устройства или вспомогательные технологии. Не полагайтесь исключительно на title для предоставления важной информации.

Оба атрибута играют важную роль в создании более доступного и понятного контента для всех пользователей.