Сегодня для использования сайта, сервиса, приложения не должно быть преградой для людей с особенными потребностями (например, с нарушениями зрения, тремором или дислексией).
Создание продукта с цифровой инклюзией — уже не просто следование социальным трендам, но и возможность стать ближе к своей аудитории, быть более клиентоориентированным и человечным.
Эксперты разбирают, какие практики могут использовать разработчики и какие требования к цифровой доступности есть в России и за рубежом.
Люди с дислексией, дальтонизмом и другими особенностями не имеют инвалидности и не входят в статистику, но тоже могут сталкиваться со сложностями при использовании цифрового ресурса.
ОВЗ — это ограниченные возможности здоровья, они могут быть постоянными и временными. Например, слепота или дальтонизм — это постоянное, сломанная ключица — временное. Далеко не все цифровые продукты учитывают эту специфику.
Какие особенности можно выделить, которые влияют на использование цифровых продуктов:
По нему сайт Правительства имеет оценку 100%. Это не значит, что сайт одинаково стопроцентно доступен для всех категорий пользователей, но оценка сервиса дает базовый ориентир.
Советую также обратиться к экспертам для оценки сайта с точки зрения пользовательского опыта, поскольку людям без особенностей, влияющих на восприятие информации, может быть сложно понять, как сайт воспринимают другие люди.
Все, что будет дальше перечислено, мы выполнили для сайта Правительства Нижегородской области, поэтому советы подтверждены опытом.
При этом создателям сайта не нужно полагаться на браузерное масштабирование — эта функция может сработать по-разному в браузерах, ее может не быть вовсе, также она может быть не очевидна для пользователей. Поэтому разработчики делают отдельную кнопку, вызывающую режим для слабовидящих с настройкой нужного размера текста и картинок.
Может она и отключить визуальные эффекты и настроить изображения: сделать их черно-белыми или выключить вовсе. Тем самым такая форма становится полезной и для тех, кто не может воспринимать визуальные эффекты и изображения.
Дизайн такой версии можно изменить под концепцию сайта, но сами функции универсальны. Мы реализовали такую на сайте Правительства Нижегородской области, на сайте Международного аэропорта Внуково и на других проектах — везде она смотрелась уместно.
Сайт Правительства Нижегородской области
Версия для слабовидящих на сайте Международного аэропорта Внуково
Людям с тяжелой формой дислексии, которым сложно читать текст, также могут быть полезны скринридеры. Есть проекты, которые помогают почувствовать на себе эти особенности. Например, проект « » от Ассоциации родителей детей с дислексией.
Для корректной озвучки сайт, сервис или приложение нужно адаптировать под требования программ-скринридеров на уровне разработки. Что мы сделали для сайта, над доступностью которого работали:
Разные виды дальтонизма
В связи с этим создателям цифровых продуктов не нужно полагаться на цветовые обозначения на сайте. К примеру, выбранные пункты должны не просто поменять цвет, но и приобрести какой-то еще визуальный эффект — например, полужирное выделение, рамка, отметки в виде галочек.
примеру, мы выделили выбранные области поиска с помощью цвета и инверсии — выбранный элемент «Новости» находится на залитой темной плашке, сама надпись становится белой в отличие от остальных черных:
Настройки поиска на сайте nobl.ru
Также сложности с различением похожих оттенков могут быть по другим причинам, например, из-за цветопередачи экрана. Поэтому лучше в принципе избегать близких оттенков для дифференциации элементов на сайте, и дополнять кнопки текстовыми указаниями.
Анимации, особенно гиперактивные, могут отвлекать и мешать воспринимать контент людям с СДВГ, аутизмом и другими неврологическими заболеваниями.
Обычно в настройке версии для слабовидящих добавляют возможность отключить анимации и эффекты, убрать цветность изображения или отключить картинки вовсе. Мы добавили эту функцию в настройку версии для слабовидящих.
При таких нарушениях люди пользуются программами для навигации с помощью клавиатуры: перемещаются по сайту с помощью клавиш со стрелками и табами. Если сайт не адаптирован, управление клавиатурой будет невозможно, и функции сайта останутся недоступными для людей с этой особенностью.
Для удобного клавиатурного управления через клавиши стрелок и tab нужно на уровне разработке разметить объекты. Что мы выполнили на сайте:
На сегодняшний день это самый верный способ проверить интерфейс сайта на доступность, позволяющий, кроме самого кода, дать пользовательскую оценку. В качестве контрольной проверки использовали сервис автоматической проверки Lighthouse.
В ГОСТе отдельно отмечено, что для каждого положения есть проверяемые критерии выполнения, которые позволяют оценить уровень выполнения цифровой доступности. Существует три уровня: A, AA и AAA. Последний — высший, обычно ему соответствуют сайты организаций, которые связаны с исследованиями инклюзивности.
К примеру, в ГОСТе прописана рекомендация: на сайте нужно избегать контента, который потенциально может спровоцировать у человека приступ или негативную реакцию. На уровне А требуется, чтобы контент сайта не имел каких-либо мелькающих элементов, которые возникают на странице более трех раз в секунду.
Между тем, 1 сентября появился , где указаны 12 требований цифровой доступности для людей с ограничениями по зрению для официальных сайтов органов госвласти и местного самоуправления.
Они касаются доступности контента, например, текстовая информация должна масштабироваться не менее чем на 200% от исходного масштаба страницы без применения вспомогательных технологий и без появления горизонтальной прокрутки.
Среди зарубежных выделяется финского аэропорта — на момент исследования там была озвучка текста на шведском и финском, можно было выделить текст и включить озвучивание. В данный момент эта функция пропала с сайта.
Что касается требований, то существуют международные положения, которые регламентируют внедрение цифровой инклюзии — Гайдлайна по доступности веб-контента (WCAG). Их формулирует World Wide WEB Consortium — Консорциум Всемирной паутины.
Базовые правила такие:
Реализация цифровой доступности — это не так сложно, как кажется на первый взгляд. Основные принципы актуальны только для цифровой доступности, но и в целом для любого качественного адаптивного сайта. Резюмирую требования:
Кроме того, пользователи с особенностями восприятия информации тоже имеют покупательскую активность. Это также потенциальные клиенты, а значит одна из возможностей расширить аудиторию и увеличить чеки. Конкуренция за покупателя в этом сегменте не такая высокая, это надо учитывать, но в любом случае адаптированный сайт, портал и приложение — еще одна возможность выделиться среди аналогичных продуктов без цифровой инклюзии.
Продукт, разработанный в соответствии с принципами цифровой доступности, становится максимально понятным и комфортным не только для людей с особенностями восприятия и здоровья, но и для широкого круга пользователей.
Создание продукта с цифровой инклюзией — уже не просто следование социальным трендам, но и возможность стать ближе к своей аудитории, быть более клиентоориентированным и человечным.
Эксперты разбирают, какие практики могут использовать разработчики и какие требования к цифровой доступности есть в России и за рубежом.
Что такое цифровая доступность
Только в нашей стране, согласно , живут более 11 млн россиян с инвалидностью. Среди них есть, например, слабовидящие, которым неудобно использовать сайт в стандартном режиме.Люди с дислексией, дальтонизмом и другими особенностями не имеют инвалидности и не входят в статистику, но тоже могут сталкиваться со сложностями при использовании цифрового ресурса.
С какими проблемами на сайтах могут столкнуться люди с особенностями восприятия
Разные особенности восприятия и ограничения по здоровью могут мешать изучать контент, который предлагают цифровые продукты, и ограничивать использование их функций. Выделяют инвалидность и ОВЗ.ОВЗ — это ограниченные возможности здоровья, они могут быть постоянными и временными. Например, слепота или дальтонизм — это постоянное, сломанная ключица — временное. Далеко не все цифровые продукты учитывают эту специфику.
Какие особенности можно выделить, которые влияют на использование цифровых продуктов:
- острота зрения: миопия (близорукость), дальнозоркость, слепота, другие особенности и заболевания;
- дислексия — нарушение способности чтения;
- дальтонизм — цветовая слепота;
- нарушения моторики, замедленная реакция;
- синдром дефицита внимания;
- заболевания, при которых активная анимация или цветовые вспышки могут вызвать приступ.
Как учесть особенности восприятия при разработке цифровых продуктов
Рекомендации для создания доступного сайта я могу выделить, основываясь на опыте модернизации официального Правительства Нижегородской области. Сайт можно считать доступным, ориентируясь на результаты пользовательского тестирования и независимой оценки сервиса автоматической проверки Lighthouse.По нему сайт Правительства имеет оценку 100%. Это не значит, что сайт одинаково стопроцентно доступен для всех категорий пользователей, но оценка сервиса дает базовый ориентир.
Советую также обратиться к экспертам для оценки сайта с точки зрения пользовательского опыта, поскольку людям без особенностей, влияющих на восприятие информации, может быть сложно понять, как сайт воспринимают другие люди.
Все, что будет дальше перечислено, мы выполнили для сайта Правительства Нижегородской области, поэтому советы подтверждены опытом.
Проработать версию для слабовидящих
Людям с небольшими нарушениями остроты зрения может помочь настройка масштаба картинок и текстовых элементов — увеличение или уменьшение в зависимости от особенностей зрения.При этом создателям сайта не нужно полагаться на браузерное масштабирование — эта функция может сработать по-разному в браузерах, ее может не быть вовсе, также она может быть не очевидна для пользователей. Поэтому разработчики делают отдельную кнопку, вызывающую режим для слабовидящих с настройкой нужного размера текста и картинок.
Может она и отключить визуальные эффекты и настроить изображения: сделать их черно-белыми или выключить вовсе. Тем самым такая форма становится полезной и для тех, кто не может воспринимать визуальные эффекты и изображения.
Дизайн такой версии можно изменить под концепцию сайта, но сами функции универсальны. Мы реализовали такую на сайте Правительства Нижегородской области, на сайте Международного аэропорта Внуково и на других проектах — везде она смотрелась уместно.
Сайт Правительства Нижегородской области
Версия для слабовидящих на сайте Международного аэропорта Внуково
Адаптировать сайт под скринридеры
Незрячим людям остается канал восприятия через слух, они пользуются скринридерами — программами, которые озвучивают текст голосом. Есть портал , моделирующий использование скринридера для незрячего человека: чтобы почувствовать, как такие люди пользуются сайтами, запустите модуль на странице и включите звук.Людям с тяжелой формой дислексии, которым сложно читать текст, также могут быть полезны скринридеры. Есть проекты, которые помогают почувствовать на себе эти особенности. Например, проект « » от Ассоциации родителей детей с дислексией.
Для корректной озвучки сайт, сервис или приложение нужно адаптировать под требования программ-скринридеров на уровне разработки. Что мы сделали для сайта, над доступностью которого работали:
- добавили атрибуты текстового описания title и aria-label для кнопок, которые отображены одними иконками;
- заполнили текстовым описанием атрибуты картинок alt, title, aria-label, aria-labelledby, aria-describedby — при этом описали именно содержание картинки, то есть не «картинка 1», а «карта Нижегородской области»;
- также описали содержание видео и других элементов figure в блоке figcaption;
- добавили атрибут aria-expanded, указывающие скринридеру, открыт ли выпадающий список;
- добавили специальный атрибут role = "alert" с текстом «идет загрузка», чтобы скринридер дал пользователю понять, что процесс успешно пошел, и нужно подождать;
- добавили сообщение пользователю, что началась отправка данных, и указали атрибуты уведомления aria-live = "assertive" с текстом об успешной отправке или ошибке;
- добавили полям ввода формы текстовое описание в атрибутах label и aria-describedby;
- реализовали озвучивание, что модальное окно открыто, чтобы пользователь понимал, что работает в нем;
- добавили атрибут aria-describedby для указаний работы со сложными элементами, например, для календаря событий;
- отметили aria-hidden = "true" для элементов, которые не требуются к озвучке — не нужны для навигации по сайту и не относятся к контенту для пользователя.
Сделать текстовые дубли цветовых обозначений и настроить анимации
К особенностям восприятия цветов относится дальтонизм. Такие люди не различают оттенки, обычно красного и зеленого, но могут быть и другие в зависимости от вида дальтонизма.
Разные виды дальтонизма
В связи с этим создателям цифровых продуктов не нужно полагаться на цветовые обозначения на сайте. К примеру, выбранные пункты должны не просто поменять цвет, но и приобрести какой-то еще визуальный эффект — например, полужирное выделение, рамка, отметки в виде галочек.
примеру, мы выделили выбранные области поиска с помощью цвета и инверсии — выбранный элемент «Новости» находится на залитой темной плашке, сама надпись становится белой в отличие от остальных черных:
Настройки поиска на сайте nobl.ru
Также сложности с различением похожих оттенков могут быть по другим причинам, например, из-за цветопередачи экрана. Поэтому лучше в принципе избегать близких оттенков для дифференциации элементов на сайте, и дополнять кнопки текстовыми указаниями.
Анимации, особенно гиперактивные, могут отвлекать и мешать воспринимать контент людям с СДВГ, аутизмом и другими неврологическими заболеваниями.
Обычно в настройке версии для слабовидящих добавляют возможность отключить анимации и эффекты, убрать цветность изображения или отключить картинки вовсе. Мы добавили эту функцию в настройку версии для слабовидящих.
Реализовать клавиатурное управление
При нарушении моторики у человека может не быть возможности управлять компьютерной мышью или быстро реагировать на происходящее на экране.При таких нарушениях люди пользуются программами для навигации с помощью клавиатуры: перемещаются по сайту с помощью клавиш со стрелками и табами. Если сайт не адаптирован, управление клавиатурой будет невозможно, и функции сайта останутся недоступными для людей с этой особенностью.
Для удобного клавиатурного управления через клавиши стрелок и tab нужно на уровне разработке разметить объекты. Что мы выполнили на сайте:
- обернули заголовки тегами H1-H6;
- использовали интерактивные элементы HTML: a, button, input и прочие;
- к интерактивным элементам, которые выполнены через div, указали атрибут tabindex = '0' для работы с клавиатуры, чтобы с ними можно было взаимодействовать;
- применили стиль outline к интерактивным элементам в фокусе, чтобы пользователь видел, где он находится в данный момент, где его «курсор».
Как проверить доступность сайта
Для оценки доступности мы проводили пользовательское тестирование с программами экранного доступа NVDA для Windows и Talk Back для Android.На сегодняшний день это самый верный способ проверить интерфейс сайта на доступность, позволяющий, кроме самого кода, дать пользовательскую оценку. В качестве контрольной проверки использовали сервис автоматической проверки Lighthouse.
Обязательно ли делать сайт доступным? Требования к цифровой инклюзии в России и за рубежом
Разберем, какие требования к доступности цифровых продуктов существуют, и обязательно ли их соблюдение.Требования к цифровой доступности по ГОСТу в России
В нашей стране актуален , он содержит требования к цифровой доступности: цифровой продукт должен быть доступным, воспринимаемым, понятным и работоспособным. Этот документ основывается на рекомендациях Консорциума Всемирной паутины (World Wide WEB Consortium — W3C). Применение ГОСТа — дело добровольное.В ГОСТе отдельно отмечено, что для каждого положения есть проверяемые критерии выполнения, которые позволяют оценить уровень выполнения цифровой доступности. Существует три уровня: A, AA и AAA. Последний — высший, обычно ему соответствуют сайты организаций, которые связаны с исследованиями инклюзивности.
К примеру, в ГОСТе прописана рекомендация: на сайте нужно избегать контента, который потенциально может спровоцировать у человека приступ или негативную реакцию. На уровне А требуется, чтобы контент сайта не имел каких-либо мелькающих элементов, которые возникают на странице более трех раз в секунду.
Между тем, 1 сентября появился , где указаны 12 требований цифровой доступности для людей с ограничениями по зрению для официальных сайтов органов госвласти и местного самоуправления.
Они касаются доступности контента, например, текстовая информация должна масштабироваться не менее чем на 200% от исходного масштаба страницы без применения вспомогательных технологий и без появления горизонтальной прокрутки.
Требования к цифровой доступности за рубежом
Когда мы проводили исследование сайтов аэропортов России, США, Европы и Азии, то в том числе изучали и цифровую доступность для пользователей с ограничениями по здоровью. Выяснили, что все российские сайты аэропортов имеют версии для людей с нарушениями зрения, а вот у зарубежных коллег это слабо распространено.Среди зарубежных выделяется финского аэропорта — на момент исследования там была озвучка текста на шведском и финском, можно было выделить текст и включить озвучивание. В данный момент эта функция пропала с сайта.
Что касается требований, то существуют международные положения, которые регламентируют внедрение цифровой инклюзии — Гайдлайна по доступности веб-контента (WCAG). Их формулирует World Wide WEB Consortium — Консорциум Всемирной паутины.
Базовые правила такие:
- Воспринимаемость. Цифровой продукт можно воспринимать, используя разные органы чувств — с помощью зрения или, например, на слух.
- Управляемость. Можно по-разному управлять сайтом, порталом, приложением — через клавиатуру, компьютерную мышь или голосом.
- Понятность. У пользователя не должно возникать затруднений во время взаимодействия с цифровым продуктом, все интуитивно понятно.
- Устойчивость. Сайт или сервис должен корректно работать на различных моделях устройств и быть совместимым с технологиями и доступными для пользователей браузерами.
- В Южной Корее эту тему регламентирует о благополучии людей с ограниченными возможностями (Act on Welfare of Persons with Disabilities): он указывает, что государственные органы и частные компании должны следовать основным принципам WCAG.
- В ЕС действует , который дополняется . Ключевые требования: для недоступных элементов должно быть объяснение и доступная альтернатива, должно быть описание, как пользователю запросить недостающую информацию, и как пожаловаться, если его просьба не будет удовлетворена.
- В США этому посвящен третий раздел об американцах с ограниченными возможностями (Americans with Disabilities Act — ADA), где установлено, что веб-ресурсам запрещено дискриминировать людей с инвалидностью. Обязательные требования к цифровой инклюзии действуют для сайтов государственных организаций и описаны в Закона о реабилитации.
Итоги: как сделать сайт или сервис инклюзивным
Совсем неважно, какой у пользователя уровень цифровой грамотности, особенности здоровья, ПК или смартфон. Он в любом случае должен легко и быстро найти и понять нужную ему информацию.Реализация цифровой доступности — это не так сложно, как кажется на первый взгляд. Основные принципы актуальны только для цифровой доступности, но и в целом для любого качественного адаптивного сайта. Резюмирую требования:
- Версия для слабовидящих с возможностью масштабировать контент.
- Высокая контрастность текста и фона.
- Межстрочный интервал.
- Адаптивность для разных устройств.
- Четкая структура и продуманная навигация. Пользователь должен самостоятельно найти то, что ему нужно.
- Вариативность перемещения по сайту без использования мыши, с помощью компьютерной клавиатуры.
- Адаптирование под скринридеры.
Зачем компаниям нужна цифровая доступность
Развитие цифровой инклюзивности — это не только забота о людях с особенностями здоровья, это забота о себе. Каждый из нас в любой момент жизни может получить травму, и то, что раньше казалось привычным, станет временно недоступным. Высокий уровень инклюзивности продуктов позволит пользоваться цифровыми услугами на том уровне, на котором мы привыкли.Кроме того, пользователи с особенностями восприятия информации тоже имеют покупательскую активность. Это также потенциальные клиенты, а значит одна из возможностей расширить аудиторию и увеличить чеки. Конкуренция за покупателя в этом сегменте не такая высокая, это надо учитывать, но в любом случае адаптированный сайт, портал и приложение — еще одна возможность выделиться среди аналогичных продуктов без цифровой инклюзии.
Продукт, разработанный в соответствии с принципами цифровой доступности, становится максимально понятным и комфортным не только для людей с особенностями восприятия и здоровья, но и для широкого круга пользователей.
