Доступность сайтов для самых маленьких
Сила веба заключается в его универсальности. Доступность всем вне зависимости от ограничений здоровья является важным аспектом.
Тим Бернерс-Ли, Директор W3C и изобретатель Интернета
В последнее время все чаще разработчики вспоминают о таком понятии, как доступность. Многие подразумевают под этим термином удобство использования сайта людьми с проблемами зрения. То есть то, как ваш сайт читается программами чтения с экрана.
Но по факту доступность сайта это гораздо более обширная область.
Об этом говорит Крис Хайльман:
Давайте начнем с официального определения от консорциума W3C:
Веб был спроектирован так, чтобы с ним мог работать любой человек, вне зависимости от его аппаратного и программного обеспечения, языка, культуры, физических и умственных способностей. Когда Веб удовлетворяет всем этим требованиям, то он становится доступным для людей с ограничениями слуха, подвижности, зрения и когнитивных способностей.
Как мы видим из определения, под доступностью стоит понимать не только читабельность сайта, но и удобство его использования группами людей с иными ограничениями. Если говорить простыми словами, любой посетитель вашего сайта должен удобно получить необходимый контент.
Почему так важно помнить о доступности?
В первую очередь это выгодно с точки зрения бизнеса. Доступность стоит в одном ряду с таким общепринятыми практиками как юзабилити, адаптивный дизайн, SEO-оптимизация. Исследования доказали, что доступные сайты увеличили охват аудитории, поднявшись на более высокие позиции в органическом поиске, а так же наблюдалось снижение затрат на обслуживание. Более подробно можно почитать на сайте проекта доступности от W3C.
Во-вторых, доступность помогает увеличить социальную интеграцию пожилых людей, людей из развивающихся стран и сельских районов.
В-третьих, во многих развитых странах возможность использовать интернет относится к основным правам человека. Это значит, что всем социальным группам людей должны быть предоставлены равные условия доступа к информации, удобства ее получения. Ни у кого не должно быть преимуществ перед другими.
Уровни доступности
В спецификации выделяются три уровня требований к сайту: А (низший), АА (средний) и ААА (наивысший). При выполнении всех требований с маркером А вы сделаете сайт, доступный людям без отклонений и с легкими отклонениями. Выполнив все три уровня требований вы сделаете свой сайт доступным для абсолютно всех людей, за редким исключением.
Принципы
В основе идеи доступности веба лежат четыре принципа: воспринимаемость, управляемость, понятность и надежность.
Даже если какой-то конкретный кейс, существующий на вашем сайте, не рассмотрен в документации, основываясь исключительно на этих четырех принципах и собственном здравом смысле вы сможете протестировать интерфейс на доступность.
Рассмотрим каждый из этих принципов подробнее.
Воспринимаемость
Информация и элементы интерфейса должны быть доступны для восприятия любого пользователя.
Это означает, что ваш сайт должен быть доступен в полной мере для всех органов восприятия. Не должно быть такого, что у зрячих пользователей будет преимущество перед людьми с проблемами зрения. Или сайтом будет невозможно пользоваться только при помощи клавиатуры.
Самым ярким примером этому служит полноценная возможность использования вашего сайта при помощи программ чтения с экрана. Например, у всех картинок должен быть задан альтернативный текст.
Однажды я смотрела документальную передачу о человеке после автокатастрофы. Он был почти полностью парализован. Он писал книги, набирая их на компьютере при помощи карандаша, зажатого в зубах. Об использовании мыши не могло быть и речи.
Подумайте, сможет ли такой человек полноценно пользоваться вашим сайтом? Сможет ли он “увидеть” то, что вы скрыли во всплывающем окне? Будет ли адекватным поведение контента по нажатию на пробел?
Управляемость
Все элементы интерфейса и навигации доступны для взаимодействия.
Любой пользователь должен иметь возможность использовать интерфейс полноценно.
Возвращаясь к предыдущему примеру, подумайте, сможет ли такой пользователь перемещаться по навигации с помощью Tab? Откроется ли ваше красивое бургер-меню? А выпадающий список?
Понятность
Контент и интерфейс в целом должны быть понятны пользователю. Ничего на сайте не должно находится за пределами его понимания.
Некоторые дизайнеры (а с ними и разработчики) любят заменять стандартные пункты меню на иконки. Поймет ли пользователь значение иконки правильно? Расшифрует ли какой пункт или функция кроются за ней? Не уверены? Стоит продублировать информацию подписью под иконкой.
Надежность
Контент на сайте должен быть одинаковым для любого пользователя. В том числе для тех, кто работает с вашим сайтом при помощи вспомогательных технологий.
На вашем сайте размещена статья. По дизайнерской задумке она перемежается различными элементами украшения. Проследите, чтобы эти элементы не мешали навигации по статье людям, не использующим мышь или не зачитывались экранными читалками.
Рекомендации
Рассмотрим несколько самых основных рекомендаций, внедрив которые в свой продукт вы сделаете его доступным для бОльшего числа людей.
- Предоставьте текстовую расшифровку для всего нетекстового контента. Продублируйте все видео и аудио материалы текстовой расшифровкой. Сюда же относится альтернативный текст фотографии, возможность проговорить капчу, названия для полей ввода.
- Дайте возможность увеличить шрифт, если основным контентом сайта является текст. А вообще всегда давайте такую возможность.
- Скрывайте от читалок и навигации с клавиатуры оформительский контент. При перемещении по сайту Tab’ом я бы не хотела застрять на каком-нибудь вензеле вместо попадания на нужную кнопку.
- Контент должен оставаться логичным и понятным при его адаптации. Например, при упрощении макета страницы, отключении css-стилей и картинок. Восприятие не должно зависеть от формы, размера или оформления контента.
- Предоставьте возможность управления всеми функциями при помощи клавиатуры. При этом не должно мешать естественной навигации и взаимодействию при помощи мыши.
- Не используйте на сайте мигающих элементов. Или ограничьтесь тремя вспышками. Часто мигающие элементы могут вызвать эпилептический припадок или привести к нежелательным последствиям у людей с нарушениями психики.
- Помогайте пользователю понять где он находится. Используйте так называемые “хлебные крошки”, указывая на то, какой путь он проделал вглубь сайта начиная с главной страницы.
- Каждая страница имеет заголовок, из которого понятно ее содержание.
- Не пугайте пользователя непредсказуемым поведением страницы. Ярким примером могут послужить различные всплывающие окна с предложениями акций и т.д. Посетитель пришел читать статью, а не смотреть на внезапно возникающие всплывающие окна, закрывающие пол экрана.
- Помогайте пользователям с вводом информации и по возможности исправляйте ошибки. Если требуется ввести название города, то после ввода первой буквы предлагайте список вариантов. Или если название было введено английскими буквами предлагайте вариант названия города, но на русском языке.
- Следите за чистотой собственного кода. Всегда используйте закрывающие теги, даже там, где они не обязательны и их отсутствие не ведет к “поломке” верстки. Все теги используются согласно своей роли в спецификации, нет повторяющихся идентификаторов или атрибутов (в рамках одного тега).
Безусловно, это далеко не все рекомендации даже для достижения уровня А. Но я считаю все эти пункты выполнимыми в короткий срок и с минимальными финансовыми/временными затратами. С этого стоит начать.
Если у вас нет никакой возможности изменить существующий сайт прямо сейчас, то создайте альтернативную версию сайта, на которой будут учтены основные пожелания к доступности. Причем не обязательно дублировать сайт полностью, с его дизайном и всем контентом без исключения. Вынесите только самое основное и важное, за чем пришел клиент.
У меня есть знакомый, страдающий от тяжелой формы дальтонизма. Как-то он рассказал, что не смог воспользоваться функцией восстановления пароля от личного кабинета одного крупного банка. Для сброса пароля нужно было выбрать из нескольких изображений красный предмет.
Заключение
В большинстве своих примеров я приводила крайние формы нарушений. Но не забывайте, что доступность это обо всех пользователях. Не у всех ваших посетителей зрение равно 1, не у всех работают обе руки, не все хорошо слышат.
Я очень советую задумывать о доступности в самом начале проектирования продукта. Обязательно расскажите о доступности своему дизайнеру и UX-проектировщику. Если на этапе разработки вы понимаете, что какой-то из элементов сайта не будет работать для некоторых из посетителей — не молчите и предлагайте найти альтернативное решение.
Настоятельно советую вам начать изучение данной темы с официальной спецификации W3C и с советами по реализации рекомендаций.
Полезные ссылки:
– Две доступности, или почему accessibility и availability не одно и то же
– Проектирование для дислексиков: часть первая, часть вторая
– Как используют интернет и современные технологии люди с нарушением зрения
Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся бабле и оставляете свой комментарий. Спасибо!
Оригинал статьи опубликован на сайте netology.ru
