2009-11-16 8 views
8

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

ответ

12

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

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

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

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

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

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

Некоторого empirical data показывает title ненадобности:

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

Here's good piece of advice, лучше сказать, чем я мог

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

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

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

+0

Если есть текст alt, то immenge действительно существует. Например, я могу проголосовать вверх и вниз по стекированию, даже если это не ссылка. – Jared

+0

@ Jared: Я пытаюсь сказать, что вы должны чувствовать, что страница была сделана только с текстом, а не то, что вы пропускаете что-либо с такими вещами, как 'my-image.gif' или' an image of a smiley ', которые больше не дают вам больше чем больше текста для прослушивания. – voyager

0

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

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

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

+3

Первое, что выбрано alt и title - атрибуты, а не тег, во-вторых, если мы поместим один и тот же контент в alt и заголовок, тогда читатель экрана повторит одно и то же содержимое дважды. который не имеет смысла –

+0

Справедливая точка, атрибут, а не тег. В зависимости от используемого вами устройства чтения с экрана вы можете установить, какой атрибут читать в любом случае. – rochal

19

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

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

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

+0

Спасибо за ур ответить –

+0

+1 хороший опыт из первых рук. – alex