Title и Alt атрибуты

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

Атрибут alt

Назначение: Основное предназначение атрибута alt (альтернативный текст) — это обеспечение доступности. Он служит для того, чтобы пользователи с нарушениями зрения могли понять, что изображено на картинке, используя экранные читалки. Также этот текст отображается в случае, если изображение не загружается.

Примеры:

  • Изображение продукта: <img src="product.jpg" alt="Классическая кожаная сумка черного цвета">
  • Иконка: <img src="icon.png" alt="Иконка настроек">
  • Фотография на блоге: <img src="beach.jpg" alt="Песчаный пляж с пальмами и океаном на закате">

Рекомендации:

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

Атрибут title

Назначение: Атрибут title предоставляет дополнительную информацию о изображении при наведении курсора на него. Это не обязательно, но может добавить контекста или дополнительную информацию.

Примеры:

  • Изображение продукта: <img src="product.jpg" alt="Классическая кожаная сумка черного цвета" title="Эта сумка изготовлена из высококачественной кожи и идеально подходит для деловых встреч">
  • Иконка: <img src="icon.png" alt="Иконка настроек" title="Настройки учетной записи">
  • Фотография на блоге: <img src="beach.jpg" alt="Песчаный пляж с пальмами и океаном на закате" title="Фотография популярного туристического места">

Рекомендации:

  • Используй атрибут title для добавления дополнительных деталей или контекста.
  • Не повторяй информацию из alt в title, если это не нужно.
				
					<img decoding="async" src="https://foxtype.eu/wp-content/uploads/2024/08/placeholder-2.png" 
     alt="Захватывающий вид на горное озеро с ледниковыми вершинами" 
     title="Эта фотография была сделана во время похода в горы в августе 2024 года">

				
			

Полезные статьи