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

8

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

Ваш Ответ

3   ответа
0

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

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

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

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

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

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

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

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

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