Недавно коллеги попросили меня собрать небольшой чек-лист создания доступного компонента «из коробки». Постарался преобразовать свой опыт в простое руководство, следуя которому проще не переделывать компонент, когда будет нужно чинить недоступное, а сразу делать хорошо.
Зачем мне делать что-то доступным? Скопировать ссылку
У вас идеальное зрение? У вас всегда оно будет таким?
Ломали ли вы когда-нибудь руку? Или, может, получали вывих? Возможно, по неосторожности порезали палец? Удобно было пользоваться интернетом одной рукой?
Ломалась ли у вас мышка? Или тачпад? Представьте, что у вас сломался тачпад, при этом вам срочно надо найти сервис для его ремонта, но телефон разряжен, а поисковик сделан так, что с клавиатуры вы не можете перейти по ссылке. Удачи и терпения!
Мы, разработчики, всё ещё не умеем считать упущенную выгоду. Как на одной из конференций сказал Анатолий Попко (незрячий эксперт в сфере невизуальной доступности), он готов тратить деньги в различных сервисах, чтобы вести свой бизнес. Но многие сервисы почему-то не хотят принимать его деньги, не давая пользоваться функциями полноценно.
Делая удобные интерфейсы для людей с особыми возможностями, вы делаете очень удобные интерфейсы для самих себя.
Как люди могут пользоваться вашим сайтом? Скопировать ссылку
Есть много способов пользоваться сайтами помимо классического сёрфинга по интернету с монитором, мышкой и клавиатурой.
- Со скринридером — сайт озвучивается. Полезно незрячим людям.
- С клавиатуры — когда есть возможность пользоваться навигацией без мышки, кнопками Tab, Enter, Space и стрелками. Полезно людям с ограничениями опорно-двигательного аппарата и тем, кто не хочет тянуться к мышке.
- Мышкой — когда нет возможности пользоваться клавиатурой.
- С включённым зумом — потому что ослабленное зрение.
- С включённым контрастом — потому что изначальный контраст не подходит. Полезно людям с цветовой слепотой.
- С выключенной анимацией — потому что мельтешение вредит. Полезно людям с эпилепсией.
- Левой рукой — потому что так удобнее. Полезно левшам.
Как сразу создавать доступные компоненты? Скопировать ссылку
Делайте по готовым инструкциям, не мудрите. До вас уже многое придумано, и придумано хорошо. На Smashing Magazine есть отличный гайд по теме.
Верстайте семантично — тогда скринридер сможет большую часть задач решить сам, без сложностей со стороны разработки.
Используйте ARIA, если семантики не хватает. Но сначала всё же постарайтесь справиться в пункте № 2.
Мелкие кликабельные области — плохо. Попробуйте своим пальцем попасть на тачах в мелкую кнопку, чтобы закрыть какой-нибудь попап, перекрывающий контент. Бесит? Придерживайтесь минимума в 44 пикселя для меньшей стороны интерактивного блока — этого обычно достаточно для пальца.
Внутри ссылок
<a>
должен быть текст, иначе скринридер постарается прочитатьhref
ссылки. Вряд ли у вас все адреса на странице красивые и понятные. Нет текста по дизайну — добавьте<span class="visibility-hidden">
. А лучше пообщайтесь с дизайнером, договоритесь с ним, какой можно добавить текст.Не путайте кнопки и ссылки: переход в восстанавливаемое по URL состояние? Это ссылка
<a>
. Нет перехода? Кнопка<button>
.Не используйте только иконки для подписи интерактивных элементов. Пусть это будет текст, не только иконка. Добавьте скрытый
span
или применитеaria-label
. По иконке и зрячие не всегда поймут, что хотел сказать автор. Текст универсален для носителей языка.Подписывайте картинки. Люди без зрения тоже хотят понимать, что там. Не можете подписать — поставьте пустой
alt=""
, иначе скринридер постарается прочитать URL картинки. Если у вас настроена раздача статики с CDN, то адреса картинок будут не самые красивые и понятные.Не прячьте визуальный фокус. Если нужно спрятать «некрасивый» дефолтный фокус, оформите кастомный. Объясните дизайнеру, что прятать нельзя. Если он против, попросите его добавить
cursor: none
в его графический редактор для большей наглядности проблемы.Захватывайте фокус в модальных окнах. Фокус не должен проваливаться за пределы модалки.
Переносите фокус при открытии модального окна или всплывашки внутрь. Так удобнее, можно сразу начать навигироваться по полезному контенту, а не искать его при помощи клавиши Tab.
Верните фокус обратно к кнопке, которая открыла модальное окно, после того, как оно закроется.
Цвета должны различаться сильно, если они играют роль. Лучше помимо цвета использовать ещё и иконки, подчёркивания, отличающийся текст. Зелёный цвет для обозначения успеха и красный цвет для ошибки некоторые видят как одинаковый для непонятно-чего. К тому же, если ваш сайт активно использует красный цвет как брендовый, он не будет выглядеть как состояние ошибки.
Для видео используйте субтитры, которые не вшиты в видео. Вшитые субтитры невозможно перевести и прочитать скринридером.
Используйте медиафичи
prefers-*
, которые подхватывают настройки операционной системы. Например,prefers-reduced-motion
илиprefers-contrast
. Если пользователь поставил такую настройку, у него есть на это причины.Не используйте мелкий шрифт, он бесит даже людей с идеальным зрением. Я, например, мелкий шрифт не вижу. Дизайнер говорит, что так надо? Попросите его выставить в графическом редакторе
font-size: 5px !important
, чтобы лучше продемонстрировать проблему.Не переусердствуйте. Делать идеальную доступность нет смысла, пока не работают основные сценарии. Нужно делать хорошо и дать возможность пользоваться важными сценариями сайта. Когда кнопка «Купить» в интернет-магазине не работает, идеальные подписи к картинкам бессмысленны.
Используйте правильные тексты. Не пишите на кнопке «Кнопка», роль элемента и так читается скринридером. Он умеет зачитывать роли для списков, кнопок, ссылок, навигации и других элементов.