Всем привет! Меня зовут Артём Плаксин, я незрячий специалист по цифровой доступности и работаю в VK. Почитать о моей работе в офисе вы можете в одном из постов этого блога. Сегодня я хочу поговорить о практической стороне доступности. Этот пост посвящён доступности изображений, выводимых через теги <img> и <svg>.

Вы узнаете:

• Как понять, нужна ли подпись (альтернативный текст) к картинке.

• Какие подписи будут too much.

• Как адаптировать картинки, которым нужна подпись.

• И, наконец, как адаптировать картинки, которым не нужна подпись.

Каким картинкам подпись нужна

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

Нужны альтернативные тексты:

• фотографиям;

• стикерам и смайликам;

• логотипам;

• изображениям, дополняющим статью.

Подписи не нужны:

• иконкам списков;

• любым декоративным иконкам вроде телефона или значка электронной почты;

• картинкам на ссылках, рядом с которыми есть или возможно добавить лейбл или альтернативный текст, описывающий контекст;

• логотипам на ссылках, если название компании уже присутствует в тексте ссылки.

Требования к альт-тексту

При добавлении альтернативного текста к картинке нужно понимать, что он должен быть коротким и ёмким. От вас не требуется составлять подробный тифлокомментарий (специальное описание для слепых всей визуальной информации), а нужно лишь дать краткое название изображённому.

Вы можете опираться на этот короткий чек-лист:

1. Длина альтернативного текста не должна превышать 100 символов, желательно уложиться в 80.

2. Слов «Изображение», «Графика», «Иконка» в описании быть не должно. Об этом сообщает роль элемента.

3. Однако можете смело указать категорию изображения: «Фотография», «Логотип», «Скриншот».

4. Избегайте сложных предложений с запятыми и иными знаками препинания.

5. Как в любом лейбле, пишите альт-текст с заглавной буквы и не ставьте точку в конце.

Скорее всего, у вас в работе будут возникать ситуации, когда какой-то из пунктов чек-листа не удаётся выполнить. Такое может произойти, не существует универсальной памятки под все изображения в мире, поэтому просто постарайтесь сделать то, что можете. Наличие альтернативного текста априори лучше, чем его отсутствие.

Хороший пример

Плохой пример

Ссылка на скачивание мобильного приложения FNS в одном из сторов.

Адаптация

Самое главное — для адаптации картинок, выведенных через тег <img>, использовать атрибут alt. Причём он должен быть обязательным во всех ваших проектах, даже если он пустой.

Полезное

Если изображению нужно описание, этот тег нужно заполнить: <img alt="Логотип ВК">.

Декоративное

Если изображению не нужно описание и оно является декоративным, крайне важно явно указать, что атрибут пустой: <img alt="">.

Отсутствие атрибута у декоративного изображения приведёт к тому, что оно в некоторых браузерах, основанных на Chromium, всё равно попадёт в дерево доступности, только как изображение без описания.

Важно! В различных публикациях в сети вам могут предлагать адаптировать декоративное изображение, выведенное через <img>, сразу тремя атрибутами: alt="", aria-hidden="true" и role="presentation".

Использовать следует только пустой альт. Соблюдайте гигиену кода.

Адаптация

Как правило, в контейнерах <svg> выводятся декоративные изображения, которые необходимо скрывать, однако в этой публикации я в том числе расскажу, как их можно адаптировать, чтобы скринридер корректно считывал лейбл.

Полезное

Тег <svg> не на всех связках скринридеров и браузеров корректно определяется в качестве изображения, поэтому, кроме лейбла, ему нужно явно указать роль изображения.

<svg role="img"><title>Альтернативный текст</title></svg>

Декоративное

Так как у <svg> отсутствует атрибут alt, для адаптации его мы использовать пустым не можем, поэтому нужно явно повесить атрибут aria-hidden="true".

<svg aria-hidden="true">...</svg>

Этот атрибут необходимо добавлять ко всему контейнеру, избегая попадания фокусируемых с клавиатуры элементов внутрь области его действия.

Конец

На этом всё, надеюсь, мне удалось ответить на популярные вопросы о доступности картинок. Если есть идеи для новых разборов, пишите в комментариях. Буду рад вернуться с новым материалом в следующем месяце.

Подписывайтесь на мой блог в Telegram, в нём я пишу о буднях незрячего и мысли на тему цифровой доступности.