Немного о тексте в атрибуте «alt»

Немного о тексте в атрибуте «alt»

От автора: уверен, вы знаете, что такое alt текст. Это атрибут тега изображения, несущий важную задачу – он описывает изображение для тех, кто не может видеть по тем или иным причинам. Пожалуйста, используйте их. Не хочу преуменьшать послание «пожалуйста, используйте их», но некоторые интересные факторы, связанные с альтернативным текстом, изо дня в день попадались мне.

Когда не нужно

Hidde de Vries недавно написал статью «не всегда нужен альтернативный текст»:

«Но когда после иконки идет текст, например, «log out», сама иконка становится декоративной, и ей альтернативный текст уже не нужен:»

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

«В этом случае атрибут alt можно оставить пустым, в противном случае скрин ридер объявит «button — close close».»

Я бы думал об идеальном решении, так как эта иконка полностью декоративна. Было бы идеально применить ее через CSS, но суть в следующем: если приходится использовать изображение, то атрибут alt здесь наносит вреда больше чем пользы.

Можно ли получить это бесплатно?

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

Демо Sarah использует для этого Computer Vision API.

А что с figcaption?

Не хочется говорить, но я не очень хорошо прописывал описания для изображений в блог-постах прямо здесь на CSS-Tricks. Это проблема, которую нужно исправлять, изменив процесс. Часто мы добавляем текст к изображениям через тег figcaption. И очень часто этот текст по содержанию похож на альтернативный. Там описывается, что происходит на изображении.

Я спрашивал по этому поводу, и Zell Liew сказал мне, что делает то же самое:

«У меня тот же вопрос. Большинство моих figcaption описывают изображение, чтобы ридеры понимали, о чем изображение.»

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

Я также говорил с Eric Bailey, у него была интересная идея.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

«Это:

Сохраняет стиль фигуры

Предотвращает пустой alt, что может вызвать проблемы у некоторых скрин ридеров

Делает описание близким к контенту и передает ссылку SR пользователям

Передает сильное послание визуальным ридерам, не дублируя текст для SR пользователей

Использует aria свойство, спроектированное для использования вне форм»

Хотел бы подчеркнуть, что он считал это просто идеей. Она не была тщательно проверена большим сообществом по доступности. Если кто-то из сообщества читает эту статью, что вы думаете?

Демо Eric использовало более подробный alt текст, чем figcaption. Похоже, что шаблон подошел бы, даже если бы они были одинаковыми.

Небольшое напоминание: у Twitter есть alt текст

Но эту функцию нужно активировать.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree