Вопрос по w3c, usability, wcag, accessibility – Как написать хороший альтернативный текст для изображений, чтобы помочь читателю экрана и слепому пользователю понять, о чем картинка?

8

Как написать хороший альтернативный текст для изображений, чтобы помочь читателю экрана и слепому пользователю понять, о чем картинка? и если мы используем альтернативный текст, то что должно быть в заголовке = "текст", если мы используем оба в особых случаях, таких как изображения меню и т. д.

Ваш Ответ

3   ответа
19

Stackoverflow в качестве примера как хорошего, так и плохого.

Alt теги должны быть краткими и описательными. Например, stackoverflow'salt Тэги для вариантов выбора "за" и "против" хороши, так как они не требуют много времени, чтобы прочитать и быстро добраться до сути. Примеры неверных тэгов alt делают этот вопрос любимым и принимают этот ответ. Ни один из тегов не является описательным, любимый тег просто*"и тег принять ответ"check«Единственный способ рассказать мне, что они из себя представляют, это прочитать источник или сделать так, чтобы кто-нибудь увидел, чтобы я знал, для чего они.

Так далеко какtitle Атрибуты идут, у меня нет особого совета. Моя программа чтения с экрана не читает их по умолчанию, поэтому я обычно не использую их. Примером чего-то, что может быть полезно, является дополнительная информация. Например, причина, по которой мой приемлемый уровень ответов так низок, заключается в том, что я не могу сказать, принял ли я ответ на вопрос. Было бы хорошо, если бы атрибут заголовка на графике принять этот ответ сказал бы что-то вроде "нажмите, чтобы принять этот ответ«если ответ не был принят и»Нажмите, чтобы удалить этот ответ как принятый ответ«если это принятый ответ.

+1 хороший опыт из первых рук. alex
Спасибо за ваш ответ Jitendra Vyas
12

не заставьте слабовидящего пользователя понять, что это за изображение. Для слепых, изображение эффективноне существуетВсе, что есть, это текст.

alt текст должен работать как одно предложение / абзац, который можно заменить на изображение, передать тот же контент и все же иметь смысл в контексте смежного контента.

Если изображение является частью графического интерфейса, тоalt текст должен содержать действие (глагол), строкуupvote, ответь на это или жевыйти.

Вы должны посетить свой сайт сlinks и попытаться понять ваш сайт. Если есть, например, круговая диаграмма, ееalt В тексте должна быть небольшая сводка процентов. Если у вас просто красивый цветок рядом с сообщением в блоге, не делайте это безрассуднымalt текст какцветок-компаньон в блоге № 324 или даже хужеflower.jpg.

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

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

Несколькоэкспериментальные данные шоуtitle за ненадобностью

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

Вот хороший советлучше поставить, чем мог

Используйте это, чтобы предоставить дополнительную информацию, которая не является существенной. Большинство визуальных браузеров отображают текст заголовка в качестве всплывающей подсказки при наведении на него элемента, однако производитель браузера должен решить, как будет отображаться текст заголовка. Некоторые вместо этого будут отображать текст в строке состояния. Ранние версии Safari сделали это, например.

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

Помните, чтоlongdesc атрибут должен бытьссылка для дальнейшей информации, а нетекст как некоторые люди упускают это.

Если есть альтернативный текст, изображение существует. Например, я могу голосовать за стек по течению вверх и вниз, даже если это изображение, а не ссылка. Jared
@Jared: Я пытаюсь сказать, что вы должны чувствовать, что страница была сделана только с текстом, а не то, что вы что-то упускаете с такими вещами, как<img src="my-image.gif" alt="my-image.gif"> или же<img src="smiley.gif" alt="an image of a smiley"> это не дает вам ничего больше, чем больше текста, чтобы услышать. Esteban Küber
0

что лучшая практика - помещать одно и то же содержимое в атрибуты alt и title.

Что касается «что писать» - просто, в двух словах, что на картинке.

Проверьте эту статью, где атрибуты alt описаны довольно хорошо:http://www.cs.tut.fi/~jkorpela/html/alt.html

Во-первых, alt и title - это атрибуты, а не Tag, во-вторых, если мы поместим один и тот же контент в alt и title, программа чтения с экрана будет повторять один и тот же контент дважды. что не имеет смысла Jitendra Vyas
Справедливая точка, атрибут, а не тег. В зависимости от используемой вами программы чтения с экрана, вы можете в любом случае установить, какой атрибут читать. rochal

Похожие вопросы