От автора: уверен, вы знаете, что такое alt текст. Это атрибут тега изображения, несущий важную задачу – он описывает изображение для тех, кто не может видеть по тем или иным причинам. Пожалуйста, используйте их. Не хочу преуменьшать послание «пожалуйста, используйте их», но некоторые интересные факторы, связанные с альтернативным текстом, изо дня в день попадались мне.
Когда не нужно
Hidde de Vries недавно написал статью «не всегда нужен альтернативный текст»:
«Но когда после иконки идет текст, например, «log out», сама иконка становится декоративной, и ей альтернативный текст уже не нужен:»
<button type="button"><img src="close.svg" alt="" /> Close</button>
«В этом случае атрибут alt можно оставить пустым, в противном случае скрин ридер объявит «button — close close».»
Я бы думал об идеальном решении, так как эта иконка полностью декоративна. Было бы идеально применить ее через CSS, но суть в следующем: если приходится использовать изображение, то атрибут alt здесь наносит вреда больше чем пользы.
Можно ли получить это бесплатно?
Компьютеры сейчас ооочень умны. Они могут просматривать наши изображения и предлагать описания без необходимости вводить их вручную.
Демо Sarah использует для этого Computer Vision API.
А что с figcaption?
Не хочется говорить, но я не очень хорошо прописывал описания для изображений в блог-постах прямо здесь на CSS-Tricks. Это проблема, которую нужно исправлять, изменив процесс. Часто мы добавляем текст к изображениям через тег figcaption. И очень часто этот текст по содержанию похож на альтернативный. Там описывается, что происходит на изображении.
Я спрашивал по этому поводу, и Zell Liew сказал мне, что делает то же самое:
«У меня тот же вопрос. Большинство моих figcaption описывают изображение, чтобы ридеры понимали, о чем изображение.»
Я решил, что не нужно использовать копию текста из figcaption в alt атрибуте, потому что те, кто читали alt текст тогда читали бы одно и то же два раза.
Я также говорил с Eric Bailey, у него была интересная идея.
<figure> <img src="screenshot.png" alt="Screenshot of Chrome displaying a split view. On the left is a page full of image thumbnails comparing pre and post-optimization filesize. On the right is Chrome developer tools showing paint rasterize duration for the images. With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds."> <figcaption aria-hidden="true"> With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds. </figcaption> </figure>
«Это:
Сохраняет стиль фигуры
Предотвращает пустой alt, что может вызвать проблемы у некоторых скрин ридеров
Делает описание близким к контенту и передает ссылку SR пользователям
Передает сильное послание визуальным ридерам, не дублируя текст для SR пользователей
Использует aria свойство, спроектированное для использования вне форм»
Хотел бы подчеркнуть, что он считал это просто идеей. Она не была тщательно проверена большим сообществом по доступности. Если кто-то из сообщества читает эту статью, что вы думаете?
Демо Eric использовало более подробный alt текст, чем figcaption. Похоже, что шаблон подошел бы, даже если бы они были одинаковыми.
Небольшое напоминание: у Twitter есть alt текст
Но эту функцию нужно активировать.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.