Как написать хороший альтернативный текст для изображений, чтобы помочь читателю экрана и слепому пользователю понять, о чем картинка? - PullRequest
8 голосов
/ 16 ноября 2009

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

Ответы [ 3 ]

19 голосов
/ 16 ноября 2009

Я пользователь программы чтения с экрана и буду использовать Stackoverflow в качестве примера как хорошего, так и плохого.

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

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

12 голосов
/ 16 ноября 2009

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

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

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

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

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

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

Некоторые эмпирические данные показывают title как бесполезные:

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

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

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

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

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

0 голосов
/ 16 ноября 2009

Я думаю, что лучше всего ставить одинаковое содержимое в атрибуты alt и title.

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

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

...