Уже наступила эпоха инклюзивности, когда важны потребности не только среднестатистического большинства, а и каждого отдельного человека. Особенно важен этот процесс для полноценной жизни людей с инвалидностью — а это целых 10% от всего населения Земли. Причем цифра говорит лишь об официально признанной инвалидности. Прибавьте сюда тех, кто не имеет формального документа о проблемах со здоровьем и пожилых людей, у которых ухудшается слух, зрение и подвижность с возрастом.
Это большая категория, чьи права на нормальный уровень жизни и доступность информации нужно уважать и реализовывать.
Все чаще в IT-сообществе говорят о том, что среди пользователей интернета много людей с инвалидностью, в том числе с нарушениями зрения. Они активно посещают сайты и пользуются всеми благами сети, применяя специальный софт. Владельцы сайтов и веб-разработчики могут сделать шаг им навстречу, адаптировав свои ресурсы для более удобного использования людьми с полной или частичной потерей зрения.
В этой статье мы не употребляем обозначение "слепой", как и другие слова или термины, дискриминирующие человека и сводящие его личность к одной характеристике. Нарушение зрения — это не единственное качество людей, о которых мы сегодня говорим. Нужно придерживаться принципа "сначала — человек". Корректная формулировка, которую мы и используем — "человек с нарушением зрения". О том, как правильно говорить и какие термины употреблять, можно узнать в справочнике безбарьерности.
Существует "Руководство по обеспечению доступности веб-контента (WCAG)", разработанное Консорциумом всемирной паутины (W3C). В нем четко расписаны все требования по контенту сайтов и его форматированию, чтобы максимум людей могли комфортно пользоваться информацией.
Мы расскажем вам об основных принципах разработки инклюзивных сайтов и улучшения уже существующих ресурсов. Статья подготовлена в сотрудничестве с Дмитрием Поповым, специалистом по цифровой доступности.
-
Нужна ли отдельная версия сайта для людей с нарушением зрения?
-
Как сделать свой сайт доступным для людей с нарушениями зрения
Какие нарушения зрения могут быть?
Когда идет речь о людях с нарушениями зрения, в основном вспоминают лишь о двух ситуациях — частичная и полная потеря зрения. Но существуют еще и такие нарушения как:
- Близорукость — человек хорошо различает предметы только на близком расстоянии.
- Дальнозоркость — невозможность увидеть объекты с близкого расстояния.
- Астигматизм — все объекты расплывчатые, изображения нечеткие.
- Дальтонизм — невозможность распознавать некоторые цвета.
- Дислексия — это не нарушение зрения, а скорее особенность мозга, влияющая на восприятие текста. Буквы скачут и перепутываются, из-за чего человек видит текст, но не может его прочитать. Потребности людей с дислексией также учитываются при адаптации сайтов.
Как люди с нарушениями зрения видят контент в интернете
Существуют специальные сайты и плагины, помогающие понять, как видят люди с нарушениями зрения. Вот такие расширения имеются в браузере Google Chrome.
Мы установили Web Disability Simulator, чтобы протестировать его. Так пользователи с определенными нарушениями могут видеть сайт Cityhost.
Варианты отмечены цифрами, где:
- Оригинальная версия
- Дальтонизм желто-голубого спектра
- Дальнозоркость
- Полный дальтонизм
Нужна ли отдельная версия сайта для людей с нарушением зрения?
Версия сайта для людей с полной или частичной потерей зрения размещается на том же домене и реализуется как отдельный вариант разметки без изображений (или с минимумом картинок), с простой навигацией, возможностью менять цвета и размер букв. Ее обозначают иконкой в виде очков (или просто текстом "Контрастная версия"), размещая ссылку вверху сайта.
На украинских сайтах подобных примеров немного, чаще всего они встречаются на специализированных ресурсах. Например, отдельная версия есть на сайте Львовского филиала "Украинского союза людей с инвалидностью".
На изображении представлен целый экран с максимальным увеличением текста.
Но если говорить о реальной практике, то специальные версии не оправдывают своего предназначения. В западном мире, известном более внимательным подходом к инклюзивности, они практически не встречаются.
Часто в результате получается информационно урезанная модификация, а целевая аудитория продолжает пользоваться обычным вариантом. И следует не забывать, что среди посетителей есть люди с разными нарушениями зрения. Для многих из них не требуются специальные версии, достаточно предпринять несколько шагов по адаптации основного сайта.
Если такую версию все же решили создавать, то лучше не называть ее "Версия для слабовидящих", поскольку это дискриминирует людей. Лучше чтобы название основывалось не на нарушениях у человека, а на функции, например, "Контрастная версия", "Выбор цветовой схемы", "Настройка шрифта".
Кроме того, контрастной версией могут воспользоваться не только люди с нарушением зрения, а кто угодно, находясь, например, на пляже под ярким солнцем.
Читайте также: Истории наших пользователей: как благотворительный фонд «99 PROBLEMS» помогает людям с рассеянным склерозом
Как сделать свой сайт доступным для людей с нарушениями зрения
Рекомендации по созданию инклюзивных сайтов разрабатывались совместно с тестировщиками, которые имеют полную или частичную потерю зрения. Такие специалисты уже работают в современных компаниях и помогают другим получать более комфортный доступ к веб-ресурсам.
"Воздушный" дизайн
Такой дизайн все чаще можно встретить на сайтах. Современная верстка предполагает одну колонку на весь экран, минималистичный макет, много пространства между элементами, крупные фотографии. Это дань моде, но одновременно такой визуал удобен и для посетителей с нарушениями зрения.
Для создания подобного сайта не обязательно нанимать высокооплачиваемых разработчиков: достаточно создать сайт на Wordpress или выбрать другую CMS — в них есть шаблоны с "воздушным" дизайном.
Цветовые решения
Контрастные цвета также помогают посетителям лучше различать контент сайта. Можно пойти двумя путями: либо сделать сайт сразу контрастным, либо интегрировать возможность переключать цветовые темы. Обычно используются три варианта для посетителей с нарушением зрения: черный текст на белом фоне, белый на черном и желтый текст на синем фоне.
Проверить контраст сайта можно с помощью анализатора.
Есть немало пользователей, которым белый цвет режет глаз, для них комфортнее будет темная тема.
Если текст расположен поверх изображения, должны выполняться требования по контрасту относительно фона (коэффициент не меньше 4.5:1).
Специалисты по адаптации сайтов рекомендуют не использовать цвета как смысловые элементы, чтобы не усложнять задачу людям с нарушением цветового восприятия. Если человек неправильно различает цвета, для него будет непонятной инструкция "Нажмите на синюю кнопку".
Читабельный шрифт
На сайтах все реже встретишь витиеватые шрифты — это неудобно вообще для всех, а не только для людей с нарушениями зрения. Поэтому, используя простые и читабельные шрифты, дизайнеры упрощают работу с текстом всем пользователям ресурса.
Возможность масштабировать страницу и менять размер букв
В современных браузерах доступна функция масштабирования сайтов с помощью сочетаний клавиш Ctrl+ и Ctrl-. Задача разработчиков — адаптировать верстку так, чтобы при увеличении или уменьшении масштаба сайт не "пополз", не пропадали из зоны видимости элементы, не появлялась горизонтальная прокрутка.
Можно также встроить возможность менять размер букв и расстояния между ними. Например, людям с дислексией проще читать, если увеличены междустрочные интервалы.
Управление с клавиатуры
Некоторые пользователи не могут увидеть на экране курсор мыши, зато хорошо обращаются с клавиатурой на ощупь. Им нужно предоставить возможность взаимодействовать с сайтом через клавиши — прокручивать, заполнять поля, нажимать на кнопки и разделы меню, не используя мышь. Эта функция важна и для людей с нарушениями моторики.
Важно помнить о визуальном индикаторе фокуса клавиатуры. Все интерактивные элементы (ссылки, кнопки, поля) должны визуально выделяться (с помощью рамки или коротких текстовых подсказок) при прохождении по структуре сайта с помощью клавиши Tab.
Разработчики часто отключают фокусировку в CSS через {outline: none}, но этого не следует делать. Таким образом часть пользователей лишается возможности взаимодействовать с сайтом.
Адаптация под программы экранного доступа (скринридеры)
Люди, которые не могут читать даже увеличенный текст, пользуются специальными программами (JAWS, NVDA, SuperNova). Скринридеры считывают страницу и воспроизводят ее в голосовом режиме. То есть пользователи не читают сайт, а слушают.
Программы видят текст не так как люди, они распознают разметку. Поэтому важно правильно верстать структуру HTML:
-
Присваивать правильные теги всем элементам разметки. У заголовков должна быть строгая иерархия H1, H2, H3. Не используйте разметку заголовков для увеличения шрифтов. Кнопки должны верстаться через тег , меню — через и так далее. Когда верстка визуально понятная, но используются нелогичные теги, скринридер не может правильно их считать.
-
Использовать в таблицах специальную разметку. Скринридеры позволяют двигаться по ячейкам в любом направлении. При этом перед текстом ячейки зачитывается соответствующий заголовок столбца или строки, что позволяет понимать информацию. Если табличные данные подать без табличной разметки, их сложно будет понять пользователям скринридеров.
-
Без файлов в формате PDF. Имеются в виду тексты, сверстанные в PDF в виде изображений. Такой текст скринридер не сможет прочитать. Лучше всего размещать все статьи на страницах сайта, но если понадобилось использовать PDF-файлы, их нужно делать в виде настоящего текста.
-
Правильная разметка для модальных окон. Встраивая в верстку дополнительные элементы, такие как всплывающие окна, обязательно нужно изучить специальный язык разметки ARIA. Он позволяет сделать доступным любой самый сложный интерактивный элемент. Без этого модальные окна не будут доступны пользователям скринридеров.
-
Прописывать alt всем изображениям. Атрибут alt был создан, чтобы в нем описывали, что нарисовано на картинке — текст становится альтернативой изображения, если его не получается правильно отобразить. Сейчас в него вместо этого прописывают ключевые слова. Пользователи смогут узнать о сути визуальных элементов, если в alt будет содержаться реальное описание изображения.
После таких несложных улучшений веб-ресурс станет доступен для большего количества людей. Создание инклюзивного сайта приносит пользу и посетителям, и веб-мастерам — благодаря возможности увеличить трафик и привлечь новых клиентов. И не стоит забывать, что забота о ближних и добрые дела всегда окупаются сторицей.
Cityhost дарит хостинг под размещение сайтов, адаптированных для пользователей с нарушениями зрения. Если вы владелец именно такого сайта – напишите письмо на адрес support@cityhost.net.ua и получите хостинг бесплатно.
Понравилась статья? Расскажите о ней друзьям: 
