Передовой опыт использования атрибутов изображения
Что именно является предполагаемым использованием alt
атрибут на <img>
теги?
Должно ли оно описывать изображение, или оно должно обеспечивать значимый заменяющий текст для программ чтения с экрана (и людей, у которых отключены изображения)?
Например, если у меня есть краткая биография человека на моем веб-сайте и я включаю небольшую фотографию с ним, действительно ли для пользователей с нарушениями зрения действительно имеет смысл прочитать "фотографию Джона Смита" для них?
10 ответов
Спецификация HTML 5 имеет огромный раздел по этому вопросу.
В основном, alt
атрибут должен соответствовать тому, что было бы в виде текста, если бы вы вообще не использовали изображение. Если ваше изображение чисто декоративное, вы можете использовать alt=""
, Описание идет в title
приписывать.
Я думаю, что идея состоит в том, чтобы использовать альтернативный текст для передачи той же информации, которая была предназначена для изображения. Это зависит от того, что изображение.
Навигационные элементы, возможно, лучше описываются по их функциям ("следующая страница", "назад"), чем по их внешнему виду ("стрелка вправо").
Фотография Джона Смита может быть заменена описанием Джона Смита или описанием происходящего события и т. Д.
С w3.org:
Хотя альтернативный текст может быть очень полезным, с ним нужно обращаться осторожно. Авторы должны соблюдать следующие рекомендации:
- Не указывайте нерелевантный альтернативный текст при включении изображений, предназначенных для форматирования страницы, например, alt="красный шар" будет неуместным для изображения, которое добавляет красный шар для украшения заголовка или абзаца. В таких случаях альтернативный текст должен быть пустой строкой (""). В любом случае авторам рекомендуется избегать использования изображений для форматирования страниц; таблицы стилей должны быть использованы вместо.
- Не указывайте бессмысленный альтернативный текст (например, "фиктивный текст"). Это не только разочарует пользователей, но и замедлит работу пользовательских агентов, которые должны преобразовывать текст в речь или вывод Брайля.
Он предоставляет "альтернативный" текст, если изображение не может быть загружено по какой-либо причине. В вашем примере я бы сказал, да, это было бы уместно.
Атрибут "alt" является альтернативным (текстовым) представлением семантики изображения. Это используется не только для изображений, которые не могут загружаться: оно также используется для программ чтения с экрана или только текстовых браузеров.
В вашем конкретном случае включение типа alt-text зависит от того, считаете ли вы важным отметить, что страница содержит изображение человека или нет. Если это чисто визуальный элемент, вам может не потребоваться альтернативный текст. Если он также используется в качестве какой-либо ссылки, вам, вероятно , нужен какой-нибудь alt-текст, чтобы человек, использующий программу чтения с экрана, имел представление о том, что может делать следующая ссылка.
Первое попадание в Google для этого [img alt accessibility] дает Рассмотрим, как выглядит или звучит страница, когда изображения не отображаются. Затем напишите для каждого изображения альтернативный текст, который лучше всего подходит для замены ( Руководство по альтернативным текстам в элементах img)
если у меня есть краткая биография человека на моем веб-сайте, и я включаю небольшую фотографию его, действительно ли для пользователей с ослабленным зрением имеет смысл читать "фотографию Джона Смита" для них?
Если у вас нет этого альтернативного текста, как вы думаете, что они примут за изображение? "Фотография Джона Смита и его жены"? "Фотография Джона Смита, принимающего его Оскар"? "Фотография Джона Смита, убивающего Джона Кеннеди"? "Фотография Джона Смита, лежащего мертвым в своем патио после того, как его убил его любимый слон"?
Если это фотография Джона Смита, то да, так и скажи. Если это что-то еще, так и скажи.
АтрибутAlt используется с тегом img.
Alt означает альтернативный
Используется для краткого описания изображения.
Отображается на экране, если браузер не может загрузить изображение
Кратко опишите образ, как если бы вы разговаривали со слепым человеком. Довольно просто
Я уверен, что это значение атрибутов используется Google для индексации поиска изображений.
Это должно быть все, что помогает пользователю, если изображение не отображается.
Кстати, "особенность", когда вы наводите курсор мыши на изображение в IE, и подсказка показывает, что ALT не является правильным поведением ALT. Название должно быть использовано для этого.