HTML-тег img: атрибут title против атрибута alt?

Я просматривал Amazon и заметил, что при поиске « 1 ТБ », если вы наведете курсор мыши на изображение с рейтингом в звездах, вы увидите оценку только при использовании IE. Если вы используете другой браузер, счет не будет отображаться.

Рейтинг 3,8 и рейтинг 4,2 отображаются как 4 звезды. Конечно, 3,8 звезды против 4,2 (оценка 76% против 84%) могут иметь значение!

Это связано с тем, что стандартный способ отображения altтекста - это только когда пользователь выключает графику или когда браузер «считывает» (например, браузер для пользователей с ослабленным зрением). Однако IE показывает это при наведении курсора.

Поэтому я думаю, что если Amazon должен показывать это независимо от браузера пользователя, то его titleследует использовать в дополнение к alt. Вы бы согласились?

Я бы выбрал оба. Заголовок будет показывать красивую всплывающую подсказку во всех браузерах, а alt даст описание при просмотре в браузере без изображений.

Тем не менее, я хотел бы увидеть некоторую статистику того, сколько «серферов», идущих в «магазин» для просмотра товаров, на самом деле отключили изображения или используют браузер, который не поддерживает изображения. Я думаю, что времена, когда 90% населения использовали модем 28k для подключения к InterWeb, давно прошли.

Их используют для разных вещей. altАтрибут используется вместо изображения. Если изображение не может быть показано и в программах чтения с экрана.

titleАтрибут показан вместе с изображением, обычно в виде парения подсказки.

Одно нельзя использовать «вместо» другого. Каждую из них следует использовать правильно , чтобы делать то, для чего они предназначены.

alt и title , как уже упоминалось, для разных вещей. Хотя атрибут title предоставляет всплывающую подсказку, alt также является важным атрибутом, поскольку он указывает текст, который будет отображаться, если изображение не может быть отображено. (И в некоторых браузерах, таких как firefox, вы также увидите этот текст во время загрузки изображения)

Еще один момент, который, как мне кажется, следует сделать, это то, что атрибут alt требуется для проверки как документа XHTML, тогда как атрибут title является просто «дополнительной опцией», так сказать.

Это потому, что они служат разным целям, и их следует использовать, а не друг над другом.

«Alt» - это то, что вы, ребята, уже сказали, чтобы вы могли видеть, что это за изображение, если изображение не может быть отображено (по какой-либо причине), он также позволяет людям с ослабленным зрением понять, о чем изображение.

Атрибут «title» является правильным для отображения всплывающей подсказки с заголовком для изображения.

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

alt = text [CS] Для пользовательских агентов, которые не могут отображать изображения, формы или апплеты, этот атрибут определяет альтернативный текст. Язык альтернативного текста определяется атрибутом lang.

w3.org

Я считаю, что alt необходим для строгого соответствия XHTML.

Как отмечали другие, заголовок предназначен для всплывающих подсказок (неплохо), alt - для доступности. Нет ничего плохого в использовании обоих, но всегда должен присутствовать alt.

Атрибут ALT предназначен для пользователя с ослабленным зрением, который будет использовать программу чтения с экрана. Если ALT отсутствует в ЛЮБОМ теге изображения, будет прочитан весь URL-адрес изображения. Если изображения являются частью дизайна сайта, они все равно должны иметь ALT, но их можно оставить пустыми, чтобы не нужно было читать URL-адрес для каждой части сайта.

Атрибут 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) невизуальным пользователям сложно сделать паузу и запросить соответствующие значения заголовка строки / столбца, используя свои вспомогательные технологии при переходе через форму.

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

Элемент Img

Допустимые атрибуты, указанные в MDN .

• alt
• crossorigin
• decoding
• height
• importance (экспериментальный API)
• intrinsicsize (экспериментальный API)
• ismap
• referrerpolicy (экспериментальный API)
• src
• srcset
• width
• usemap

Как видите, titleатрибут не разрешен внутри imgэлемента. Я бы использовал altатрибут, а при необходимости использовал бы CSS (пример: псевдокласс :hover) вместо titleатрибута.

Нет, я думаю, altэто лучше, потому что цель этого атрибута - предоставить «альтернативный» текст в случае, если изображение не может быть просмотрено (будь то изображение отсутствует или сам браузер не может его отобразить).

MVCFutures для ASP.NET MVC решили сделать и то, и другое. Фактически, если вы укажете alt, он автоматически создаст для вас заголовок с тем же значением.

У меня нет под рукой исходного кода, но быстрый поиск в Google показал его тестовый пример!

    [TestMethod]
    public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
        HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
        string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
        Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
    }

Вы не должны использовать атрибут title для элемента img. Причина этого довольно проста:

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

Источник: http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML 5.1 включает общие советы по использованию атрибута title:

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

Источник: http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute.

Что касается специальных возможностей и различных программ чтения с экрана:

• Jaws 10-11: по умолчанию выключено
• Window-Eyes 7.02: включен по умолчанию
• NVDA: не поддерживается (нет вариантов поддержки)
• VoiceOver: не поддерживается (нет вариантов поддержки)

Следовательно, как правильно выразился Дени Будро : явно не рекомендуемая практика .