Лучшие практики использования атрибута изображения alt
https://stackoverflow.com/questions/613173
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
В чем именно заключается предполагаемое использование alt атрибут на <img> метки?
Должно ли оно описывать изображение или должно содержать осмысленный заменяющий текст для программ чтения с экрана (и людей, у которых изображения отключены)?
Например, если у меня на сайте есть краткая биография человека и его небольшая фотография, действительно ли для слабовидящих пользователей имеет смысл зачитывать им "Фотографию Джона Смита"?
Решение
Спецификация HTML 5 имеет огромный раздел об этом.
По сути, атрибут alt должен быть тем, что было бы в виде текста, если бы вы вообще не использовали изображение. Если ваше изображение чисто декоративное, вы можете использовать alt="". Описание содержится в атрибуте title.
Другие советы
Я думаю, что идея состоит в том, чтобы использовать альтернативный текст для передачи той же информации, которая была предназначена для изображения. Это зависит от того, что изображение.
Навигационные элементы, возможно, лучше описываются их функцией (" следующая страница " ;, " назад "), чем их внешним видом (" стрелка вправо < !> Quot;).
Фотография Джона Смита может быть заменена описанием Джона Смита или описанием происходящего события и т. д.
От w3.org:
Хотя альтернативный текст может быть очень полезным, обращаться с ним необходимо осторожно.Авторы должны соблюдать следующие рекомендации:
- Не указывайте нерелевантный альтернативный текст при включении изображений, предназначенных для форматирования страницы, например, alt="красный шар" было бы неуместно для изображения, которое добавляет красный шар для оформления заголовка или абзаца.В таких случаях альтернативным текстом должна быть пустая строка ("").Авторам в любом случае рекомендуется избегать использования изображений для форматирования страниц;вместо этого следует использовать таблицы стилей.
- Не указывайте бессмысленный альтернативный текст (например, "фиктивный текст").Это не только расстроит пользователей, но и замедлит работу пользовательских агентов, которые должны преобразовывать текст в речь или выводить шрифтом Брайля.
Это обеспечивает " alternate " текст, если изображение не может быть загружено по какой-либо причине. В вашем примере я бы сказал, да, это было бы уместно.
" alt " Атрибут является альтернативным (текстовым) представлением семантики изображения. Это не только для изображений, которые не могут загружаться: оно также используется для программ чтения с экрана или только текстовых браузеров.
В вашем конкретном случае включение типа alt-text зависит от того, считаете ли вы важным отметить, что страница содержит изображение человека или нет. Если это чисто визуальный элемент, вам может не потребоваться альтернативный текст. Если он также используется в качестве какой-либо ссылки, вам, вероятно, нужно хотеть некоторый alt-текст, чтобы человек, использующий программу чтения с экрана, имел некоторое представление о том, что может делать следующая ссылка.
Первое нажатие на Google для этого [img alt accessibility] дает Подумайте, как выглядит или звучит страница, когда изображения не отображаются. Затем напишите для каждого изображения альтернативный текст, который лучше всего подходит для замены ( Руководство по альтернативным текстам в элементах img )
Это должно быть что угодно, что помогает пользователю, если изображение не отображается.
Кстати, " функция " когда вы наводите курсор мыши на изображение в IE и подсказка показывает, что ALT не является правильным поведением ALT. Заголовок должен быть использован для этого.
Кратко опишите изображение, как если бы вы разговаривали со слепым человеком. Довольно просто.
Я уверен, что это значение атрибутов используется Google для индексации поисковых запросов.
если у меня есть краткая биография человек на моем сайте, и включить небольшое фото из них, это правда значимо для слабовидящих пользователей иметь & "Фото Джона Смита &"; зачитать им?
Если у вас нет этого альтернативного текста, как вы думаете, что они примут за изображение? & "Фотография Джона Смита и его жены &"? & "Фотография Джона Смита, принимающего его Оскар" !? & "Фотография убийства Джона Смита Джона Смита &"? & "Фотография Джона Смита, лежащего мертвым в своем патио после того, как его убил его любимый слон &"
Если это фотография Джона Смита, так и скажи. Если это что-то еще, так и скажи.
Alt используется с тегом img .
Alt означает альтернативный
Используется для краткого описания изображения.
Он отображается на экране, если браузер не может загрузить изображение
