Как записать хороший сопроводительный текст для изображений читателю экрана справки и слепому пользователю для понимания то, о чем изображение?
Я закончил тем, что нуждался в чем-то подобном некоторое время назад. Чтобы заставить HTML выстраивать в линию сторону для запасного пути Вы могли использовать два iFrames, но необходимо будет тогда связать их прокрутку с помощью JavaScript, поскольку Вы прокручиваете (если Вы позволяете прокручивать).
Для наблюдения разности, однако, Вы больше, чем, вероятно, захотите пользоваться чужой библиотекой. Я использовал DaisyDiff, библиотека Java, для подобного проекта, где мой клиент был доволен наблюдением единственного рендеринга HTML содержания с MS Word "изменения дорожки" - как разметка.
HTH
3 ответа
Вы не должны заставлять пользователя с ослабленным зрением понимать, что это за изображение. Для слепых изображения фактически не существует , все, что есть, - это текст.
Текст alt должен работать как одно предложение / абзац, который можно заменить для изображения передают тот же контент и по-прежнему имеют смысл в контексте соседнего контента.
Если изображение является частью графического интерфейса пользователя, тогда текст alt должен передавать действие ( глагол), строка голос за , ответьте на этот или выйти .
Вам следует посетить свой сайт со ссылками и попытаться понять ваш сайт. Если есть, например, круговая диаграмма, ее текст alt должен быть небольшой сводкой процентов. Если у вас просто красивый цветок рядом с сообщением в блоге, не добавляйте к нему бессмысленный alt текст, например изображение цветка, сопутствующее сообщению в блоге № 324 или еще хуже цветок. jpg .
Если изображение важно для навигации или для получения информации, попробуйте дать ему текст alt , который заставит сайт работать без изображения. Если изображение является только презентационным, дайте ему пустой текст alt .
title , насколько я знаю, должен отображаться только при наведении курсора, поэтому они должны давать дополнительную информацию изображению, поэтому следует избегать бесполезного дублирования информации . Для программ чтения с экрана это немного сложнее, поскольку поддержка и конфигурация могут сильно отличаться у разных пользователей.
Некоторые эмпирические данные показывают title как бесполезные:
- Большинство пользователей Программное обеспечение для чтения с экрана не меняет свои настройки по умолчанию для доступа к информации атрибута TITLE в ссылках.
- Большинство программ для чтения с экрана по умолчанию могут получить доступ к содержимому атрибута TITLE в элементах управления формы.
- Некоторые программы для чтения с экрана не могут получить доступ к информации атрибута TITLE. 12159] Пользователи экранных луп могут читать текст атрибута TITLE при более низких уровнях увеличения.
- Пользователи экранных луп не могут читать текст атрибута TITLE, который содержит более 1 или 2 слов, при более высоких уровнях увеличения.
Вот хороший фрагмент совет , лучше сказать, чем я мог бы
Используйте это, чтобы предоставить дополнительную информацию, которая не является существенной. Большинство визуальных браузеров отображают текст заголовка как всплывающую подсказку при наведении курсора на элемент, однако решение о том, как будет отображаться текст заголовка, зависит от производителя браузера. Некоторые вместо этого будут отображать текст в строке состояния. Например, ранние версии Safari делали это.
Одним из хороших способов использования атрибута title является добавление описательного текста к ссылкам, особенно если сам текст ссылки четко не описывает назначение ссылки. Таким образом вы можете помочь посетителям узнать, куда их приведет ссылка, возможно, избавив их от загрузки страницы только для того, чтобы узнать, что это не то, что их интересует. Еще одно возможное использование - предоставить дополнительную информацию для изображения, например, дата или другая информация, которая, вероятно, не важна.
Я использую программу чтения с экрана и буду использовать Stackoverflow в качестве примера как хорошего, так и плохого.
Alt-теги должны быть краткими и описательными. Например, теги stackoverflow alt для вариантов голосования «за» и «против» удобны, так как не занимают много времени, чтобы прочитать и быстро перейти к сути. Примеры плохих альтернативных тегов: сделать этот вопрос любимым и принять этот ответ. Ни один из тегов не является описательным, любимый тег - это просто « * », а принять тег ответа - « check ». Единственный способ узнать, что они собой представляют, - это прочитать источник или кто-нибудь зрячий, дайте мне знать, для чего они нужны.
Что касается атрибутов title , у меня действительно не так много советов. Моя программа чтения с экрана не работает По умолчанию я их не читаю, поэтому обычно не использую. Примером того, что может быть полезно, является дополнительная информация. Например, причина того, что мой принятый уровень ответов настолько низок, заключается в том, что я не могу сказать, принял ли я ответ на вопрос. Было бы неплохо, если бы в атрибуте title на графике принятия этого ответа было бы написано что-то вроде « щелкните, чтобы принять этот ответ », если ответ не был принят, и « Щелкните, чтобы удалить этот ответ как принятый ответ "если это принятый ответ.
Я думаю, что лучше всего использовать одинаковый контент в атрибутах alt и title.
Относительно того, «что писать» - просто, в двух словах, что изображено на картинке.
Посмотрите эту статью, где атрибуты alt описаны довольно хорошо: http://www.cs.tut.fi/~jkorpela/html/alt.html