Атрибут ALT
Атрибут alt определен в наборе тегов (а именно, img, area и, необязательно, для input и applet), чтобы позволить вам предоставить текстовый эквивалент для объекта.
Текстовый эквивалент приносит следующие преимущества вашему веб-сайту и его посетителям в следующих распространенных ситуациях:
- в настоящее время веб-браузеры доступны на самых разных платформах с очень разными возможностями; некоторые не могут отображать изображения вообще или только ограниченный набор типов изображений; некоторые могут быть настроены так, чтобы не загружать изображения. Если ваш код имеет атрибут alt, установленный в его изображениях, большинство этих браузеров будут отображать описание, которое вы дали вместо изображений
- некоторые из ваших посетителей не могут видеть изображения, будь они слепые, дальтоники, слабовидящие; Атрибут alt очень помогает тем людям, которые могут положиться на него, чтобы иметь представление о том, что находится на вашей странице
- Боты поисковых систем относятся к двум указанным выше категориям: если вы хотите, чтобы ваш сайт был проиндексирован так, как он того заслуживает, используйте атрибут alt, чтобы убедиться, что они не пропустят важные разделы ваших страниц.
Атрибут названия
Целью этого метода является предоставление контекстно-зависимой помощи пользователям при вводе данных в формах путем предоставления справочной информации в атрибуте title. Справка может включать информацию о формате или примеры ввода.
Пример 1: раскрывающееся меню, ограничивающее область поиска
Форма поиска использует выпадающее меню, чтобы ограничить область поиска. Выпадающее меню находится рядом с текстовым полем, используемым для ввода поискового запроса. Связь между полем поиска и раскрывающимся меню понятна пользователям, которые могут видеть визуальный дизайн, в котором нет места для видимой метки. Атрибут title используется для идентификации меню select. Атрибут title может произноситься программами чтения с экрана или отображаться как подсказка для людей, использующих экранные лупы.
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
...
</select>
Пример 2. Поля ввода номера телефона
Веб-страница содержит элементы управления для ввода номера телефона в Соединенных Штатах, с тремя полями для кода города, обмена и последних четырех цифр.
<fieldset>
<legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset>
Пример 3. Функция поиска
Веб-страница содержит текстовое поле, в котором пользователь может ввести условия поиска, и кнопку «Поиск» для выполнения поиска. Атрибут title используется для идентификации элемента управления формы, и кнопка расположена сразу после текстового поля, чтобы пользователю было ясно, что в текстовом поле должен быть введен поисковый термин.
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
Пример 4. Таблица данных элементов управления формы
Таблица данных элементов управления формы должна связывать каждый элемент управления с заголовками столбцов и строк для этой ячейки. Без заголовка (или закадрового LABEL) невизуальным пользователям трудно приостановить и запросить соответствующие значения заголовка строки / столбца с помощью вспомогательной технологии при переходе по форме.
Например, форма опроса имеет четыре заголовка столбца в первой строке: Вопрос, Согласен, Не определен, Не согласен. Каждая следующая строка содержит вопрос и переключатель в каждой ячейке, соответствующий выбору ответа в трех столбцах. Атрибут title для каждой радиокнопки представляет собой объединение выбора ответа (заголовок столбца) и текста вопроса (заголовок строки) с дефисом или двоеточием в качестве разделителя.
Элемент Img
Допустимые атрибуты, указанные в MDN .
altcrossorigindecodingheightimportance (экспериментальный API) intrinsicsize (экспериментальный API) ismapreferrerpolicy (экспериментальный API) srcsrcsetwidthusemap
Как видите, атрибут title недопустим внутри элемента img. Я бы использовал атрибут alt и, если требуется, я бы использовал CSS (пример: псевдокласс :hover) вместо атрибута title.