Как сделать сайт доступным

Курмак Валерия — эксперт по цифровой доступности,
автор канала »Не исключение» и курса по цифровой доступности

Текст публикуется в авторской редакции

Доступность: что такое, кому нужна, как обеспечить

Как человек взаимодействует с окружающим миром? Сначала через разные органы чувств получает информацию, потом ее перерабатывает и осознает — и лишь затем начинает взаимодействовать с окружающей средой. Об этом механизме важно помнить, если вы стремитесь обеспечить цифровую доступность. Спросите себя: «Может ли любой человек мой сайт воспринять, понять и может ли с ним взаимодействовать?».

Визуальный канал не единственный способ восприятия информации. Более того, он не всегда выступает в качестве ведущего. Человек получает информацию посредством пяти основных органов чувств: глаза (зрение), уши (слух), язык (вкус), нос (обоняние), кожа (осязание, ощущение боли, колебания температуры). Сегодня цифровой мир позволяет использовать как минимум зрение, слух и осязание. 

Когда вы проверяете, можно ли ваш интерфейс воспринять, понять, можно ли взаимодействовать с ним, подумайте о том, что:

  • глухие и слабослышащие люди с трудом или совсем не воспринимают аудиоконтент. Альтернативой могут быть субтитры, расшифровки, перевод на жестовый язык. Также глухие не могут взаимодействовать с организацией посредством звонка, поэтому важно, чтобы с вами можно было связаться по почте, в чате или с помощью других текстовых способов коммуникации.
  • незрячие люди не видят интерфейс, но они воспринимают контент посредством слуха с помощью программ экранного доступа (скринридер) или посредством осязания через брайлевский дисплей.
  • слабовидящие испытывают трудности с восприятием дизайна, который не учитывает их особенные потребности. 
  • люди с особенностями развития моторики не всегда могут пользоваться мышкой, а потому, так же как и незрячие, должны иметь возможность взаимодействия с сайтом без мышки — с помощью клавиатуры — и видеть на экране, с каким элементом они взаимодействуют.

Для всех нас очень важно понимать, не только как избежать ошибки, но и как ее исправить. 

Обеспечить доступность в цифровом мире гораздо проще, чем в физическом. В отличие от строительства пандуса, когда возникает сложность его установки из-за того, что здание является памятником архитектуры или земля, на которой вы хотите строить пандус, вам не принадлежит, в цифровой среде все зависит от двух людей — дизайнера и разработчика. Все, что требуется, — знания этих специалистов о том, как обеспечить доступность. Стоит заметить, что для этого не нужно делать никаких отдельных или специальных версий. Достаточно одной версии, универсальной и доступной для всех категорий людей, о которых мы говорили выше. Для разработки сайта, отвечающего требованиям доступности, можно обратиться к WCAG 2.2 и ГОСТР 52872-2019. Ниже приведены требования, согласно этим стандартам, которые важно учесть дизайнеру и разработчику.

Что важно учесть дизайнеру

Дизайнер — это человек, который изначально закладывает доступность. Именно он должен предусмотреть возможные варианты альтернативного восприятия контента. Например, дизайнеру следует понимать, что незрячий человек не сможет пройти сценарий, в котором имеется капча, а значит, должны быть предусмотрены другие способы проверки. При этом технические возможности и варианты следует обсуждать с разработчиками.

Структура

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

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

 

Первый уровень заголовков сайта BBC: News, Sport, Reel, More. Следующим уровнем заголовков внутри News являются Home, Coronavirus, Video и т. д.

  • Заголовки помогают в навигации внутри страницы.

Слева сплошной текст без заголовков, справа структурированный заголовками текст (источник: Kalbag L. ACCESSIBILITY FOR EVERYONE).

  • Структурированный пунктами текст воспринимается легче.

Слева сплошной неструктурированный текст, справа структурированный пунктами (источник: Kalbag L. ACCESSIBILITY FOR EVERYONE).

Язык

  • Если вы не обращаетесь к профессиональному сообществу, используйте простой общедоступный язык без специальной терминологии.
  • Избегайте жаргона, сокращений и идиом.

Шрифт

  • Рекомендуемая длина строки для одноколоночных текстов — 45–75 символов, для двух и более — 40–50. 
  • Организация W3 °C рекомендует использовать размеры шрифта от 18pt регулярный или 14pt жирный.
  • В наибольшей степени типографика важна для людей с дислексией. Используйте шрифты без засечек. По данным Dyslexic.com, к относительно «хорошим» распространенным шрифтам можно отнести Arial, Trebuchet MS, Myriad Pro и Geneva. 
  • Текст на странице должен увеличиваться до 200% с помощью комбинаций клавиш «Cmd +» или «Ctrl +» без использования ассистивных технологий. Важно, чтобы страница адаптировалась под размеры и оставалась читаемой и функциональной.

   

Справа стандартный размер куска страницы сайта «Гараж», слева увеличенный.

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

Цвет

В международном стандарте по доступности WCAG 2.2 нет требований или даже пожеланий к специальным версиям сайтов. Зато есть к контрастности между цветом текста и фоном: 4,5:1. Однако для текста с минимальным размером 18 pt нормального или 14 pt полужирного начертания контрастность можно снизить до 3:1. Контрастность важна не только для незрячих и слабовидящих людей, контрастный интерфейс важен всем пользователям и является важной частью юзабилити.

  • Все недекоративные элементы должны соответствовать вышеописанным требованиям, а именно — быть контрастными. Стоит помнить, что даже очень яркие цвета могут быть неконтрастны по отношению к определенному фону, так же как и серый к серому. 

  

Контрастность текста слева направо: 1,6:1, 1,4:1, 3,6:1

  • Люди с особенностями цветовосприятия могут не увидеть то, что вы хотите выделить для них цветом. Убедитесь, что для информирования или разметки использованы дополнительные способы: иконки, текст и т. д.

Видео о том, как люди с дальтонизмом видят мир

На ошибку указывает только цвет

Есть дополнительные способы информирования об ошибке

Ссылки

Состояния элемента ссылка: неактивная, наведение, посещенная.

  • Пользователь должен иметь возможность различать ссылку среди некликабельного контента. Для этого дизайнер может применить стандартный паттерн подчеркивания текста. Также следует использовать другие способы выделения, которые точно позволят пользователю распознать ссылку.
  • Из текста ссылки должно быть понятно, что произойдет после того, как пользователь кликнет по ней. Например, «На канале «Не исключение” я рассказываю об инклюзивном дизайне». Если просто оставить прямой адрес https://t.me/neiskluchenie, незрячему человеку придется догадываться, о чем идет речь, поскольку скринридер прочитает ему символы ссылки. Для зрячего же человека это визуальный мусор. Не используйте в качестве ссылки прямой адрес или текст «нажмите здесь»: они не помогают человеку. 
  • Хорошая практика — изменять цвет уже посещенных ссылок.

Аудиоконтент

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

  • Транскрипт является хорошей практикой представления звуковой информации в текстовом виде. 

На сайте «Постнауки» у видео есть расшифровка

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

Изображения

  • Незрячие люди не видят картинки, но с помощью атрибута «alt» можно описать, что изображено на ней. Важно, чтобы содержимое атрибута передавало информацию, которая действительно бы позволяла человеку представить изображение. Не следует использовать «photo.jpg», «DSCF0017.jpg» или «Город».
  • Кроме непосредственно дизайна разработчику следует передать:
  • подписи к ссылкам, имеющихся в дизайне вид иконок.
  • тексты, описывающие изображения на картинках, чтобы данная информация была понятна незрячим людям.
  • Подписи кликабельных элементов и тексты для изображений должны содержать только важную информацию, быть короткими и не начинаться со слов «На этой картинке изображено…» или «Кликнув на эту ссылку, вы перейдете…».

Плохо: alt = «Секретики. Замочная скважина»
Хорошо: alt = «Сквозь замочную скважину мы наблюдаем за героями»

Анимация

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

Формы

  • Убедитесь в наличии инструкций и подсказок, которые помогают пользователю избежать ошибок. Лучшая практика, когда поле содержит маску, которая подсказывает пользователю, в каком формате ему следует ввести информацию. Например, человек может не знать, с какой цифры ему начинать ввод номера: с «8» или «+7». Убедитесь, что у всех элементов ввода есть понятные лейблы-названия.

На сайте музея «Гараж» поля форм имеют лейблы, а поле номера телефона маску, также отмечены обязательные для заполнения поля.

  • Убедитесь, что есть инструкции, которые помогают пользователю исправить ошибку. 

  • Хорошая практика, когда фокус попадает на тот элемент, в котором необходимо изменить информацию.

Область нажатия

  • При взаимодействии с мобильными устройствами важно, чтобы человеку было легко нажимать на элементы. Задавайте области нажатия не меньше 44 CSS-пикселей. Так по ним будет просто попасть пальцем среднестатистическому взрослому. Поскольку иконки часто бывают меньшего размера, нужно увеличить область нажатия вокруг них.

Элементы могут быть меньше 10 мм, но область нажатия должна быть не меньше 10 мм.

Что важно учесть разработчику

Незрячие люди для взаимодействия с компьютером или мобильным устройством используют программы экранного доступа — скринридеры. Программа обращается к коду и озвучивает все то, что зрячий видит на экране. Чтобы скринридер мог считывать контент, код должен быть написан корректно и отвечать требованиям доступности. Правильное написание кода позволит избежать создания барьеров для незрячих. 

Навигация

  • Заголовки незрячим людям помогают в навигации по странице. В отличие от зрячего, который может ориентироваться на размер шрифта, незрячему человеку помогают в навигации размеченные в коде заголовки. Например, если в коде корректно проставлены уровни заголовков h1, h2, человек сможет пройтись по первому уровню, выбрать тот раздел, который он хочет прочитать и перейти на следующий уровень. 
  • Порядок чтения должен быть таким же, как и визуальный: слева направо, сверху вниз. Таким образом, первым элементом для пользователя скринридера должен быть первый элемент страницы. Но бывают исключения, например, чтобы облегчить заполнение многостраничной анкеты, логичнее выставить фокус на следующем поле, а не на элементе названия анкеты, который идет первым на каждой странице.

Элементы интерфейса

  • Любой элемент интерфейса, с которым может взаимодействовать пользователь, должен содержать в коде указание на тип элемента, его состояние (значение), название, необходимые подсказки. Это позволяет пользователю понять, какой перед ним элемент, как с ним взаимодействовать, и что в итоге произойдет. Как правило, тип нативных элементов корректно определяется по умолчанию.
  • Если элемент не представляет ценности для пользователя, его «видимость» для скринридера нужно отключить. В противном случае мы перегружаем пользователя ненужной информацией о технических аспектах интерфейса. 

Фокус

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

Процесс разработки доступного интерфейса

Неучет доступности на самом начальном этапе разработки проекта в цифровой среде приводит к тем же последствиям, что и в физической. Если вы сразу не подумали о том, чтобы сделать вход в один уровень с улицей, вам придется строить пандус. Так и в цифровой разработке — не заложив доступность с самого начала, вы окажетесь в ситуации, когда срочно придется придумывать всевозможные «костыли». 

Хорошая практика, когда дизайнер консультируется с разработчиком о том, какие решения проще реализовать с точки зрения доступности. Практика показывает, что в итоге такие решения становятся более удобными и для людей без инвалидности.

Не забывайте: после того как интерфейс готов, стоит провести авто- и юзабилити-тесты с людьми с инвалидностью. 

Узнать больше

Поделиться