HTML-тег изображения:атрибут заголовка vs.альтернативный атрибут?
https://stackoverflow.com/questions/872389
-
22-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
я просматривал Амазонка и я заметил, что при поиске "1 ТБ«Если вы наведете курсор мыши на изображение с рейтингом звезд, вы увидите оценку только при использовании IE.Если вы используете другой браузер, результат не будет отображаться.
Рейтинг 3,8 и рейтинг 4,2 отображаются как 4 звезды.Конечно, соотношение 3,8 звезды против 4,2 звезды (76% против 84%) может иметь значение!
Это связано с тем, что стандартный способ отображения alt текст появляется только тогда, когда пользователь выключает графику или когда браузер «читает» (например, браузер для пользователей с ослабленным зрением).Однако IE показывает это при наведении курсора мыши.
Поэтому я думаю, что если Amazon будет показывать это независимо от браузера пользователя, то title следует использовать в дополнение к alt.Вы бы согласились?
Решение
Я бы выбрал оба варианта.Во всех браузерах в заголовке будет отображаться красивая подсказка, а при просмотре в браузере без изображений alt будет содержать описание.
Тем не менее, мне бы хотелось увидеть некоторую статистику о том, сколько «серферов», идущих в «магазин» для просмотра товаров, на самом деле отключили изображения или используют браузер, который не поддерживает изображения.Я думаю, что времена, когда 90% населения использовали модем 28k для подключения к InterWeb, уже давно прошли.
Другие советы
Они используются для разных вещей.А alt атрибут используется вместо изображения.Если изображение не может быть показано или (я полагаю) в программах чтения с экрана.
А title атрибут отображается вдоль с изображением, обычно в виде всплывающей подсказки.
Одно не следует использовать «вместо» другого.Каждый должен использоваться правильно, чтобы делать то, для чего они были созданы.
альтернативный вариант и заголовок как уже упоминалось, предназначены для разных вещей.В то время заголовок атрибут предоставит всплывающую подсказку, альтернативный вариант также является важным атрибутом, поскольку он определяет текст, который будет отображаться, если изображение невозможно отобразить.(И в некоторых браузерах, таких как Firefox, вы также увидите этот текст пока картинка загружается)
Еще один момент, который, по моему мнению, следует отметить, заключается в том, что альтернативный вариант атрибут необходимый для проверки как XHTML-документ, тогда как заголовок Атрибут — это просто «дополнительная опция».
Это потому, что они служат разным целям, и их следует использовать не друг над другом.
«Альтернативный» означает то, что вы, ребята, уже сказали, поэтому вы можете увидеть, о чем идет речь, если изображение не может быть отображено (по какой-либо причине), это также позволяет людям с ослабленным зрением понять, о чем это изображение.
Атрибут «title» является правильным для отображения всплывающей подсказки с заголовком изображения.
По моему мнению, альтернативный текст всегда должен описывать то, что видно на изображении, в случае, если изображение не отображается.
alt = text [cs] Для пользовательских агентов, которые не могут отображать изображения, формы или апплеты, этот атрибут определяет альтернативный текст.Язык альтернативного текста определяется атрибутом lang.
Я считаю, что alt необходим для строгого соответствия XHTML.
Как уже отмечали другие, заголовок предназначен для всплывающих подсказок (приятно иметь), alt предназначен для доступности.Нет ничего плохого в использовании обоих, но alt всегда должен присутствовать.
Нет, я думаю 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
Когда дело доходит до доступности и различных программ чтения с экрана:
- Челюсти 10-11:отключен по умолчанию
- Окно-Глаза 7.02:включен по умолчанию
- НВДА:не поддерживается (нет вариантов поддержки)
- Голос за кадром:не поддерживается (нет вариантов поддержки)
Следовательно, как Дени Будро адекватно выразился: явно не рекомендуемая практика.
Атрибут ALT предназначен для пользователей с ослабленным зрением, которые будут использовать программу чтения с экрана.Если ALT отсутствует в ЛЮБОМ теге изображения, будет прочитан весь URL-адрес изображения.Если изображения являются частью дизайна сайта, они все равно должны иметь ALT, но их можно оставить пустыми, чтобы не приходилось читать URL-адрес для каждой части сайта.
А 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:Таблица данных элементов управления формы
Таблица данных элементов управления формы должна связать каждый элемент управления с заголовками столбцов и строк для этой ячейки.Без заголовка (или ЭТИКЕТКИ за пределами экрана) пользователям, не являющимся визуальными пользователями, трудно приостанавливать и запрашивать соответствующие значения заголовков строк/столбцов, используя свои вспомогательные технологии при переходе по форме.
Например, форма опроса имеет четыре заголовка столбца в первой строке:Вопрос, Согласен, Не определился, Не согласен.Каждая следующая строка содержит вопрос и переключатель в каждой ячейке, соответствующий выбору ответа в трех столбцах.Атрибут title для каждого переключателя представляет собой объединение варианта ответа (заголовок столбца) и текста вопроса (заголовок строки) с дефисом или двоеточием в качестве разделителя.
Разрешенные атрибуты, упомянутые в МДН.
altcrossorigindecodingheightimportance(экспериментальный API)intrinsicsize(экспериментальный API)ismapreferrerpolicy(экспериментальный API)srcsrcsetwidthusemap
Как вы видете title атрибут не разрешен внутри img элемент.я хотел бы использовать alt атрибут, и если потребуется, я бы использовал CSS (пример:псевдокласс :hover) вместо title атрибут.
