Как сделать изображение внутри тега привязки доступным?

Допустим, у меня есть изображение, подобное приведенному ниже.

Согласно WCAG, это изображение является функциональным, поскольку оно связывает пользователя с другой страницей. Кажется, я должен указать назначение ссылки в атрибуте alt, например alt="comic homepage".

Разве человек с нарушением зрения не хотел бы знать, что изображено на изображении? Понравится ли этому пользователю что-то вроде alt="comic that links to the cloudtweaks homepage"? Комикс не кажется чисто декоративным.

<a href="http:////cloudtweaks.com">
  <img src="comic.png" alt=??? />
</a>

Пример комикса

Эта страница делает нечто подобное (прокрутите вниз страница).


image html accessibility anchor alt
person davidatthepark    schedule 18.01.2017    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вы задали этот вопрос, но не предоставили достаточно контекста. Просмотр окружающего контента, всей страницы или всего сайта может помочь.

  • Есть ли окружающий текст, объясняющий либо изображение, либо то, куда ведет ссылка?

  • Появится ли изображение на странице после ссылки, возможно, более полная версия изображения (например, все панели, если это изображение одно из многих)?

  • Поведение сайта аналогично другому сайту или разделу этого сайта, с которым, как вы уверены, знакомы пользователи?

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

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

person aardrian    schedule 18.01.2017
comment
Спасибо за информацию. Я отредактировал свой пост, чтобы включить ссылку на что-то подобное. Можете ли вы поделиться своими мыслями по этому поводу? Это изолированный раздел с комическим изображением в якоре и подписью, ведущей на веб-сайт комикса. - person davidatthepark; 19.01.2017
comment
Для этого примера я бы включил полное текстовое описание в атрибут alt. Если это информационный бюллетень по электронной почте, это ваш лучший выбор. Для дополнительных бонусных усилий (при условии, что это не электронная почта) вы можете использовать технику за кадром, связанную через aria-label или aria-decribedby, и сделать альтернативу проще. Но мне не хочется добавлять ARIA без необходимости. Поскольку ссылка просто ведет пользователя на главный сайт комикса, а не на конкретную страницу, ее можно не комментировать. - person aardrian; 19.01.2017
comment
Можете ли вы расширить полное текстовое описание на примере? Будет ли это что-то вроде моего второго примера? - person davidatthepark; 20.01.2017
comment
<img src="comic.png" alt="Single panel cartoon showing an adult and a child lying on a hill looking up at the sky. The child asks “If the cloud ever did go down, would it be called fog?” Comic sourced from CloudTweaks.com, reprinted with permission."> И да, я сравнил ложь с ложью, использовал умные кавычки, чтобы не мешать кавычкам атрибутов, и использовал верблюжий регистр в URL-адресе, когда программы чтения с экрана анализируют это. Последнее предложение остается на ваше усмотрение в зависимости от характера разрешения. - person aardrian; 20.01.2017

arrow_upward
3
arrow_downward

Эта ситуация задокументирована на веб-сайте WC3: Изображение, используемое отдельно в качестве связанного логотипа

Согласно WCAG не следует описывать текст изображения. в этой ситуации, но функция ссылки.

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

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

<a href="comics.html">Comics</a>
Image of the day:
   <img src="..." alt="If the clouds ever did go down would it be called fog?" />

или добавление описания после (обратите внимание, что при использовании aria-describedby описание может быть скрыто)

<a href="comics.html" aria-describedby="desc"><img src="..." alt="Comics" /></a>
<div id="desc" style="display:none">If the clouds ever did go down would it be called fog</div>

Но это может быть довольно тревожным, я бы сказал...

person Adam    schedule 19.01.2017
comment
aria-describedby не будет работать, если для элемента, выполняющего описание, установлено значение `display:none', так как программы чтения с экрана учитывают этот стиль и игнорируют элемент. - person aardrian; 20.01.2017
comment
@aardrian, ты не прав. Важно отметить, что по замыслу скрытие содержимого (с помощью CSS display:none или visible:hidden или атрибута HTML hidden) элементов, на которые ссылаются эти атрибуты, не препятствует использованию содержимого для укажите имя/описание. paciellogroup.com/blog/2015/05/ - person Adam; 20.01.2017
comment
Попробуйте это в выбранной программе чтения с экрана и сообщите мне, что вы получите: s.codepen.io /aardrian/debug/NdpMKm - person aardrian; 20.01.2017
comment
NVDA: Comics graphic link Если бы облака когда-нибудь опустились, это назвали бы туманом - person Adam; 20.01.2017
comment
Вы должны установить фокус на ссылку. Легче, когда есть ссылка раньше. - person Adam; 20.01.2017
comment
JAWS 17/IE11 и NVDA 2016.6/FF 50 не оповещают меня об этом при чтении контента. Я получаю его, только если я перехожу к элементу (я обновил перо, чтобы его было легче увидеть). Короче говоря, учитывая этот опыт, если информация важна, я бы не стал полагаться на aria-describedby, особенно учитывая все способы навигации пользователей по контенту. - person aardrian; 20.01.2017
comment
Я полностью согласен с вашим комментарием выше: Я не хочу добавлять ARIA без необходимости. Это решение ARIA существует, но оно не является идеальным решением для текущего примера (одна из причин, по которой я добавляю это предупреждение, может быть весьма тревожным). Это предназначено только для документации. - person Adam; 20.01.2017