На 2022 год, по данным Росстата и Пенсионного фонда, в России насчитывается более 10 млн людей с ограниченными возможностями здоровья — 9,03% от общего населения страны.
В первую очередь, доступный дизайн сайта — это возможность легко и просто взаимодействовать с интернет-ресурсом как обычному пользователю, так и посетителю с ограниченными возможностями здоровья.
Какие особенности здоровья могут создавать трудности в восприятии информации на сайте:
01
слабое зрение или слепота,
02
дальтонизм и дислексия,
03
глухота или тугоухость,
04
ограниченная подвижность или двигательная неспособность,
05
нервные и психические расстройства,
06
расстройства аутистического спектра.
07
когнитивные нарушения и деменция,
Помимо вышеперечисленных факторов на доступность сайта могут оказывать влияние и такие факторы как возраст пользователя, степень его занятости и т.д. Так, например, пожилому человеку, который плохо владеет интернетом, может быть трудно воспринимать информацию на сайте со сложной навигацией и архитектурой.
WCAG: каким должен быть доступный сайт
WCAG — это главный стандарт по доступности контента, который содержит свод правил и рекомендаций по тому, как создать удобный сайт для людей в целом и для пользователей с ограниченными возможностями здоровья.
Основные принципы WCAG:
01
Воспринимаемость
Вся информация должна быть представлена в таком формате, чтобы каждый посетитель легко мог ее воспринимать: видеоматериалы сопровождаются субтитрами для слабослышащих и тифлокомментариями (аудио) для слабовидящих.
02
Управляемость
Возможность управлять интернет-ресурсом при помощи клавиатуры. У пользователей с физическими нарушениями могут возникнуть сложности с наведением курсора.
03
Понятность
Каждый элемент на сайте или предполагаемое действие должны быть понятны посетителю. К этому принципу относятся: функция переключения языка, всплывающие подсказки, четкое разделение блоков.
04
Надежность
Принцип для разработчика. При работе над сайтом необходимо писать чистый код без дополнительных строк и ошибок.
Каждый принцип проходит через 3 уровня проверки, которые показывают был ли соблюден стандарт:
01
уровень А — минимальный,
02
уровень АА — средний,
03
уровень ААА — высокий.
Чем выше уровень, тем больше сайт доступен для всех категорий пользователей.
Как адаптировать сайт для людей с ОВЗ: рекомендации
ОВЗ — ограниченные возможности здоровья.
Прежде, чем начать разрабатывать сайт, необходимо учесть потребности людей с ОВЗ — это первый и решающий шаг. Если пропустить этот этап и внести корректировки для людей с ограниченными возможностями здоровья в последнюю очередь, сайт не будет эффективным и доступным на 100%.
Рекомендации по доступности сайтов для людей с ОВЗ
Слабое зрение
В это понятие входят различные патологии зрения: частичная потеря или зрительные нарушения. Все, кроме слепоты в ее классическом понимании.
Рекомендации:
01
Заметный цветовой контраст: текст должен быть ярче фона.
02
Разборчивый шрифт и возможность увеличивать его на сайте до 200%.
03
НЕ выравнивать шрифт по ширине.
04
Возможность изменять межбуквенный и межстрочный интервал.
05
Управление при помощи клавиатуры кнопками «вверх» и «вниз», а также
пробелом и клавишей «Tab».
06
Отсутствие капчей (тесты, которые определяют, кем является пользователь:
человеком или роботом).
07
Отсутствие временных ограничений: посетителю со слабым зрением
необходимо больше времени, чтобы изучить сайт.
08
Звуковое сопровождение текста: возможность прослушать весь сайт,
отдельные блоки или расшифровку видеофрагментов.
09
Функция проверки орфографии, а также подсказки по заполнению полей.
10
Ярко выраженные кнопки призыва к действию.
Слепота
Полное отсутствие зрения или его глубокие повреждения.
Для людей с такой особенностью будет неважен размер шрифта, цветовой контраст или возможность подстроить сайт под себя. Они слушают сайты, а не читают их.
Рекомендации:
01
Скринридеры — специальные программы, которые зачитывают всю текстовую информацию на сайте.
02
Отсутствие капчей или аудиоверсия.
03
Четкая структура страницы и разделение материала на абзацы с заголовками и подзаголовками, чтобы пользователь мог при помощи скринридеров отыскать нужный ему материал.
04
Звуковая расшифровка изображений и видеофрагментов.
05
Скрыть из поля видения скринридеров лишние элементы и всплывающие подсказки, на которые они могут переключиться.
06
Расположение информации таким образом, чтобы пользователь мог легко воспринимать материал на слух и отчетливо представлять структуру сайта.
Дальтонизм
Другое название — цветовая слепота. Это пользователи, которые не различают цвета.
Рекомендации:
01
Не использовать цвет как единственный способ передачи информации или призыв к действию.
02
Возможность самостоятельно настроить цвет фона и текста.
03
Высокая контрастность, чтобы пользователь видел разницу между оттенками.
04
Размещение текста на пустом фоне: без картинок, узоров и прочих элементов дизайна.
05
Каждая деталь на сайте должна быть различима: самые важные — более заметные, остальные — менее.
06
Ссылки лучше подчеркивать или выделять жирным шрифтом — так они будут легче восприниматься.
Дислексия
Это нарушение, при котором человеку сложно в быстром темпе распознавать слова при чтении и письме. Например, может показаться, что текст плавает, строки «заползают» друг на друга, а буквы переворачиваются.
Рекомендации:
01
Разборчивый шрифт без «засечек», курсива, каллиграфии и других буквенных украшений.
02
Создание простых, коротких и понятных предложений.
03
Большие отступы между основными блоками.
04
Возможность настраивать цвет фона, текста и размер шрифта.
05
Добавить иллюстрации, если нужно объяснить сложный материал.
06
Не применять капчи: найти другие решения для распознавания человека.
07
Не использовать курсивы, подчеркивания и выделение заглавными буквами — это сбивает пользователя.
08
Не выравнивать текст по ширине.
Глухота или тугоухость
Это могут быть люди с полным отсутствием слуха или те, кто слышит звуки, но плохо различает речь.
Рекомендации:
01
Добавить на сайт язык жестов и текстовые инструкции везде, где есть звук.
02
Письменная расшифровка всех аудиоматериалов.
03
Субтитры должны передавать не только основную речь, но и все сопутствующие звуки.
04
Простые и понятные формулировки: язык жестов не все может переводить.
05
Регулировка громкости: возможность настраивать звук на сайте независимо от остальной системы.
06
Изображения, которые смысла не несут, лучше удалить из поля видения скринридеров, чтобы не путать пользователей.
Ограниченная подвижность или двигательная неспособность
Это относится к пользователям, которые испытывают сложности при движении: невозможность навести курсор на нужный элемент или одновременно удерживать несколько клавиш.
Рекомендации:
01
Сенсорное управление голосом или движением глаз.
02
Возможность использовать сайт без мыши.
03
Управление клавиатурой: команды должны работать через нажатие одной клавиши, без сложных комбинаций. Сюда же относится скроллинг.
04
Автозаполнение: обязательный инструмент, который избавит пользователя от лишних движений.
05
Увеличение кликабельных кнопок и расстояния между ними, чтобы пользователь не испытывал трудности при нажатии.
Нервные и психические расстройства
Это болезненные состояния, при которых нарушено восприятие действительности и присутствуют расстройства в области мышления, поведения и эмоциональной стабильности.
Рекомендации:
01
Отказаться от резких и громких звуков.
02
Возможность самостоятельно отключать все аудиосопровождения.
03
Исключить частую смену кадров и неожиданные вспышки.
04
Элемент не может менять свое состояние больше 3-х раз в секунду, это способно вызвать приступ эпилепсии.
05
Выстроить простую и удобную систему навигации, чтобы не вызывать чувства раздражения и нервного возбуждения.
Расстройства аутистического спектра (РАС)
Это расстройства психологического развития, при которых характерны нарушения поведения в социуме, сложность в воспроизведении речи, зацикленность на повторяющихся действиях, интересах и увлечениях.
Рекомендации:
01
Использовать простой и понятный язык без метафор, сложных конструкций и художественных образов.
02
Отказаться от большого объема информации: короткие и емкие тексты.
03
Исключить мерцающие элементы.
04
Добавить субтитры, чтобы пользователь мог лучше усвоить материал.
05
Использовать «хлебные крошки», чтобы пользователь мог отследить свой маршрут.
Когнитивные расстройства и деменция
Это расстройства, при которых у пользователей ухудшается память, снижается скорость мыслей, рассеивается внимание и теряется концентрация.
Рекомендации:
01
Использовать простой язык без сложных фразеологизмов.
02
Минимизировать возможность вариантов выбора для пользователя.
03
Создать понятную и легкую навигацию без лишних элементов, отвлекающих внимание.
04
Избегать длинных и сложных блоков, которые не разделены интервалами и изображениями.
05
Обозначить обратный путь на главную страницу.
06
Использовать «хлебные крошки», чтобы пользователь мог отследить свой маршрут.
07
Разместить меню на самом видном месте.
08
Выделять важную информацию жирным шрифтом.
09
Разбавить текст иллюстрациями, которые наглядно объяснят материал.
Заключение
Доступный дизайн сайтов заключается не в том, чтобы быть удобным для людей с ограниченными возможностями здоровья, а в том, чтобы стать удобным для каждого пользователя интернета независимо от его физических и умственных особенностей.
Более того, если вы будете руководствоваться рекомендациями из этой статьи и требованиями WCAG, то у вашего сайта будет заметное конкурентное преимущество, высокая конверсия и положительные отзывы посетителей.
.svg)
.svg)
.svg)
.svg)
