Доступность веб-сайтов – позаботьтесь о тех, кто видит мир иначе

Разберем тему доступности сайтов с точки зрения дизайна и разработки. Как сделать ресурс удобнее для посетителей с когнитивными и физическими нарушениями разного рода. И 10 инструментов, которые помогут проверить ваш проект.

Инклюзивность и доступность – важные аспекты, которые стоит учитывать при создании сайта. Но это не тождественные понятия. Отличие их в том, что инклюзивный сайт изначально делается заточенным под определенную группу людей с ограниченными возможностями. Доступность – решение, которое предполагает, что сайт будут использовать все люди, в том числе с разнообразными нарушениями или особенностями когнитивного плана, речи, слуха, зрения, моторики. И нужно делать сайты и приложения так, чтобы каждому посетителю было комфортно.

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

Мы заботимся о том, чтобы всем было удобно жить в городской среде, на работе и в быту. Ну, по крайней мере, так делают цивилизованные люди. Учитываются разные аспекты физических особенностей и ментальных. Интернет – такая же среда, в которой люди проводят жизнь. Поэтому очевидно, что и здесь нужны свои улучшения. И американское агентство ADA еще более 20 лет назад подумало об этом. Они создали Руководство по обеспечению доступности веб-контента WCAG (Web Content Accessibility Guidlines). Оригинал можно почитать тут.

Первую версию рекомендаций опубликовали в 1999 году. Гайдлайн поддержали организации из разных стран. Но в то время разработчики и создатели веб-контента не очень-то обратили внимание на документ. В принципе, тогда еще в зачаточном состоянии была индустрия создания сайтов в целом и в частности веб-дизайн как таковой.

Та версия содержала базовые рекомендации. Основные: обеспечение альтернативы для контента звукового и визуального характера, возможность использования родного языка пользователя, корректное отображение таблиц, понятные навигационные механизмы, однозначность и простота документов.

Сегодня уже актуальна вторая версия. Она расширена, дополнена, формулировки более четкие. Естественно, учитываются и новые технологии, которых на момент 1999 просто не существовало. Вторая версия вышла в 2008 году. Да, это тоже очень давно. Но общая направленность и принципы не устарели. К тому же, создатели постарались дать общие рекомендации, без привязки к конкретным технологиям. Сформированы 4 принципа доступности.

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

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

Ну тут просто. Сайт должен быть понятным. Понятным всем. Безусловно, целевая аудитория всегда учитывается. Но стоит стараться сделать так, чтобы контент не вызывал ни малейшего напряжения в процессе его просмотра.

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

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

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

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

Забота о пользователе – прежде всего, потом уже вопрос эстетики. Но сразу скажем, что продуманные сайты с точки зрения доступности выглядят всегда хорошо. Они продуманы и сбалансированы, каждый элемент стоит на своем месте, а не просто потому что захотелось его там влепить.

Простое правило касательно цвета – контрастность. Как минимум, если вы смотрите сайт с телефона (как подавляющее большинство), то даже при повышенной яркости экрана цвета бледнеют. А иногда еще бывают блики. Очевидно, что восприятие оттенков в таком случае будет отличаться от задуманного изначально. Это нужно учитывать.

Дальтонизм – самый яркий пример особенности восприятия. Во-первых, таких людей действительно много. В основном мужчин (от 2 до 8 человек из 100) и в меньшей мере женщин (1 из 100). Посмотрите, сколько у вас друзей в соцсетях – если больше сотни, то среди них точно есть дальтоники. Это не заболевание, хотя и бывает наследственным. Это просто особенность зрения, при которой люди видят цвета немного не так, как большинство. И при этом еще и сами дальтоники делятся на разные группы. Кто-то не воспринимает оттенки красного, кто-то синего, кто-то зеленого. И есть даже малый процент людей, который в принципе не видит цвет и воспринимает все в черно-белом.

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

Специализированные сайты для дальтоников имеют свою специфику. Они не могут создаваться стандартно, с использованием привычных цветовых схем. Это будет просто непонятно, неудобно и некрасиво.

Как выбрать палитру, если у всех разное восприятие? Очевидно, что единственного ответа нет. Но если предоставить пользователю возможность выбирать настройки и дать три цветовых варианта, то это будет отличным решением. Это не так уж сложно сделать. А некоторые ресурсы предлагают даже кастомную настройку цвета элементов и фона.

Одна из самых сложных инклюзивных групп для веб-дизайнера – слабовидящие и слепые. Живущему в мире визуала человеку сложно понять, как воспринимать мир без картинки, тем более в сети. Но факт остается, даже слепые пользуются благами интернета. Они используют скринридеры – специальные программы, которые читают им текстовую составляющую сайта. Именно поэтому требуются описания, пояснения, нормально расположенные блоки. И за грамотностью нужно следить – программа может прочесть абсолютный бред, если допущены ошибки в словах и знаках препинания. Так что тем, кто пишет в комментах “мы ни на икзамине” – большой привет. Грамотность – это не только уважение к посетителю и репутация бренда. Это банально способ передать информацию верно.

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

Если на сайте предусмотрена капча, то стоит придумать альтернативные варианты проверки. Согласитесь, даже с идеальным зрением бывает сложновато разобрать, что там в этой капче. А с наличием проблем зрения – тем более.

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

Ваша задача – упростить восприятие текстовой информации.

• Дайте возможность увеличивать шрифты.
• Не делайте маленькие межстрочные интервалы – полуторный это минимум.
• Делайте короткие строки – не более 80 символов.
• Рекомендуется брать шрифты без засечек.
• Не используйте перенос слов – лучше всего никогда, даже в стандартных сайтах.
• Избегайте курсива.
• Избегайте длинных слов, сложноподчиненных предложений.

Есть интересная штука – Fog Index или Индекс туманности Ганнинга. Он помогает определить сложность восприятия текста, исходя из длины слов и предложений. Мы не будем приводить рекомендуемые показатели, потому что это не так важно в данной ситуации. Главное – чем ниже индекс, тем лучше. Он заточен под английский текст, в этом языке в целом слова и предложения зачастую короче, чем в русском. Поэтому и вывести значение будет проще. Но стоит стремиться к идеалу – загружайте текстовые блоки для проверки и сокращайте. Есть масса онлайн-сервисов для этого, найти их не составит труда. Используйте короткие фразы, короткие слова. Так текст будет восприниматься легче.

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

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

Управление с клавиатуры также бывает затруднительно. Но в целом это удобнее. Нажать кнопку проще, чем делать манипуляции мышью.

Добавьте возможность выбирать элементы на сайте с помощью кнопки Tab. Тогда можно будет выбрать активный элемент несколькими нажатиями. Упрощайте навигацию, соблюдайте структуру.

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

Проверка и помощь в создании доступного/инклюзивного контента.

• ANDI — комплексный инструмент тестирования доступности. Не только обнаружит проблемы, но и подскажет пути их решения.
• PA11Y — инструмент тестирования доступности для разработчиков.
• Contraste — проверка текста в соответствии с WCAG 2.0.
• Axe — инструмент тестирования для разработчиков. Поможет проверить доступность в браузерах, взаимодействие с фреймворками, библиотеками.
• tota11y — набор инструментов проверки доступности в вопросах визуала.
• ColorBox by Lyft Design — приложение, помогающее создать цветовые схемы по принципам доступности.
• Sim Daltonism — симулятор дальтонизма. Очень удобный визуализатор.
• Contrast — проверка контрастности согласно требованиям WCAG 2.0.
• Hex Naw — проверка цветовых систем на контрастность и доступность.
• WAVE — оценка доступности в Chrome и Firefox.

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

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

Материал подготовлен командой образовательной платформы WAYUP