Дизайн
Задача дизайнера — подойти к вопросам доступности не как к простому чек-листу с требованиями, а как к одной из граней пользовательского опыта, поскольку доступность — это один из главных аспектов юзабилити.
Важно осознать, что любой человек сталкивается с ограничениями. Закрывая потребности человека с инвалидностью, вы закрываете потребности пожилых людей и тех, кто испытывает особенные потребности постоянно, временно или ситуативно.
Например: не иметь одной руки — это постоянное состояние, сломать руку и ходить в гипсе — временное, а качать ребенка на руках — ситуативное. Однако в каждом случае человек может действовать только одной рукой.
Accessibility first
Все выигрывают от дизайна, который легко воспринимать, и с которым легко работать. Люди с разными способностями видят ваш дизайн и взаимодействуют с ним по-разному — разнообразие человеческих особенностей порождает разнообразие дизайна. Аккуратный и ясный дизайн помогает всем понять функциональность и информацию, которую он доносит; возможность по-разному взаимодействовать закрывает большинство пользовательских сценариев.
Используйте программы для симуляции разных типов дальтонизма, слабого зрения, и других особенностей.
Пользователи
Следование требованиям доступности помогут вам создать более удобный продукт для всех пользователей.
Не рассчитывайте, что у ваших пользователей нет особых потребностей. Даже если ваш продукт предназначен для небольшой группы людей, важно осознать, что с ограничениями сталкивается каждый: кто-то сломал руку и ходит в гипсе, кто-то работает в шумном помещении, а кто-то неделями не высыпается из-за рождения ребенка. Включайте особенные потребности в ваши архетипы пользователей и юзер стори.
При проектировании учитывайте особенности людей
Нарушение зрения
Слепота, близорукость или дальнозоркость, дальтонизм.
Нарушение слуха
Глухота или тугоухость, звон в ушах.
Нарушение моторики
Дрожание рук, деформация или отсутствие конечностей.
Проблемы восприятия
Дислексия, деменция, депривация сна.
Проработайте сценарии использования продукта людьми с разными особенными потребностями. Убедитесь, что участники отражают весь спектр обстоятельств, в которых вашим продуктом будут пользоваться. Используйте этих людей для регулярного тестирования интерфейса. Во время юзабилити-тестирования разрешите им использовать собственную технику с их настройками.
Вспомогательные технологии
Вспомогательные технологии — общее название технических средств для облегчения повседневной жизни людей с инвалидностью.
Программа экранного доступа или скринридер — программа для чтения с экрана компьютера или смартфона, предназначенная для незрячих и людей с ослабленным зрением. Скринридер озвучивает текст, элементы интерфейса, а также обеспечивает звуковой и виброотклик.
Уровень владения вспомогательными технологиями отличается от человека к человеку и зависят от наличия, типа инвалидности, возраста человека и других факторов. Некоторые вспомогательные технологии скорее всего вам знакомы — голосовое управление в телефоне, эргономичная клавиатура, функция увеличения страницы в браузере. Другие вспомогательные технологии, возможно, менее для вас знакомы: программы экранного доступа (screen reader), виртуальные контроллеры (switch devices), экранные лупы и другие.
Программы экранного доступа
Для взаимодействия с компьютером и смартфоном незрячие люди используют голосовой интерфейс программ экранного доступа. Попробуйте в действии программы экранного доступа (VoiceOver на Маке, VoiceOver на iOS, TalkBack на Android, NVDA или JAWS для Windows) — так вы узнаете, как люди взаимодействуют с интерфейсом и сможете самостоятельно проводить первичное тестирование.
Скринридер выводит информацию блоками. Какая именно информация попадёт в блок, определяет разработчик приложения и операционная система. Если курсор скринридера встал на кнопку, то в блок вывода речевого сообщения попадёт название кнопки от разработчика и тип этого элемента от операционной системы. Так пользователь понимает, что это за элемент и как с ним работать.
В большинстве случаев после секундной паузы скринридер подскажет, как взаимодействовать с этим типом элементов. Например, в системе Android, если это что-то кликабельное (кнопка или ссылка), то скринридер озвучит: «Нажмите дважды, чтобы активировать». На заголовке, очевидно, этого не будет — программа скажет: «Заголовок».
Управление со скринридером
Масштабирование
Убедитесь, что при увеличении контента до 200% страница читаема и функциональна, а пользователю не требуется прокручивать страницу по горизонтали.
Почему это важно. Пете поставили диагноз — глаукома, и его зрение ухудшается, несмотря на лечение. На своем компьютере и телефоне он увеличивает шрифт с помощью функций, доступных в браузере и настройках телефона.
У Ани нет компьютера, для выхода в сеть она всегда использует планшет. Когда сайт не адаптируется под экран, ей трудно управлять им.
Чтобы пользователь мог самостоятельно выбирать масштаб контента и при этом сайт оставался читаемым, лучший способ — использовать адаптивную верстку. Таким образом вы не только закроете потребности людей с нарушением зрения, но и обеспечите адаптируемость вашего сайта под любой размер устройства. Когда верстка готова, сделайте проверку: увеличьте экран до 200% с помощью комбинаций клавиш «Cmd +» или «Ctrl +».
WCAG 2.1
Макет и структура
Убедитесь, что пользователь легко понимает смысл и структуру страницы и может выполнить задачу.
Почему это важно. Василисе Петровне 78 лет, ей тяжело разбираться в сложноструктурированных страницах сайта.
Вите 32 года, он менеджер в крупной компании и привык быстро решать задачи. При выборе сервиса для него главное — время.
Иван — слепой. Он использует структуру заголовков, чтобы быстро понять, что находится на странице.
-
Дизайн должен быть таким, чтобы пользователь быстро и легко находил ключевую информацию.
-
Все содержимое и дизайн должны вписываться в логическую структуру заголовков.
-
Убедитесь, что пользователи могут перемещаться по сайту несколькими способами. Это может быть: оглавление, карта сайта, ссылки между страницами и поиск на сайте.
-
Скринридер должен считывать информацию в таком же порядке, в каком она отображается.
-
Старайтесь не использовать модальные окна. Скринридер плохо работает с всплывающими объектами.
-
Используйте стили корректно. Заголовки 1-го уровня на макете должны быть заголовками h2 в коде. И наоборот, то, что не является заголовком первого уровня, не должно быть размечено как заголовок h2. Обычный текст тоже не выделяйте как заголовок.
WCAG 2.1
Читабельность
Сделайте текст простым.
Ваши пользователи — разные люди. Для некоторых русский язык неродной, им сложно разобраться в юридических, бюрократических терминах и канцеляризмах. У кого-то могут быть особенности ментального развития или дислексия: им тяжело читать сложные предложения с причастными и деепричастными оборотами. Кто-то не понимает технические термины или специфический сленг. Пользователям мобильных устройств сложно читать длинные абзацы текста.
Используйте понятные описательные заголовки, чтобы читатели могли понять, о чем пойдет речь в тексте. Старайтесь сокращать абзацы —так их будет легче просматривать на мобильных устройствах. По возможности используйте короткие предложения.
Учитывайте уровень технических, юридических знаний аудитории и знаний о банковской сфере. Если нужно использовать термины, объясните их. При использовании аббревиатуры или сокращения сначала напишите их полностью. Если в тексте много терминов, составьте глоссарий.
Постарайтесь не использовать идиомы — выражения, значение которых не складывается из значений входящих в них слов, например «валять дурака». Люди, говорящие на жестовом языке, или люди с ментальной инвалидностью могут воспринять вас буквально.
Следите за раскладкой клавиатуры. Помните, что английская буква C и русская буква С – это 2 абсолютно разных символа, несмотря на то, что визуально они выглядят одинаково. Программа экранного доступа прочитывает символ, исходя из его кода в таблице символов, а не из начертания на экране. Наличие подобных опечаток сильно усложняет работу с текстом с помощью скринридеров незрячим людям. Например, назначая встречу в переговорке 15.С.04 следует даже ради одной буквы переключить раскладку клавиатуры, иначе пользователь программ экранного доступа будет искать переговорку «Эс», а не «Си».
По теме
- Сайт «Говорит государство» для госслужащих о том, как писать объявления и письма
- Стоп-слова — не используйте их в тексте
- Статья о штампах и канцеляризмах
- Сервис «Главред» для проверки читабельность текста
- Статья про структуру в тексте
- Информативность подзаголовков
WCAG 2.1
Типографика
Убедитесь, что пользователь может без труда прочесть текст на странице.
Почему это важно. У Жени плохое зрение, и ей трудно читать мелкий текст. У Васи дислексия, буквы с похожими элементами выглядят для него одинаково.
Что делать
Используйте достаточный для комфортного чтения размер шрифта. Минимум для основного текста — 16 пикселей, но размер может варьироваться в зависимости от стиля шрифта.
Задайте длину строки для комфортного чтения. Не делайте слишком длинные или слишком короткие строки: 45—75 символов — приемлемое количество, 66 — оптимальное. Более короткий текст хорош для форм, подписей к изображениям, заметок на полях.
Выберите разборчивый шрифт. Рекомендуется использовать шрифты без засечек для интерфейсов и шрифты с засечками для длинных документов, но это не безусловное правило. Важно, чтобы шрифт был:- хорошо читаем вне зависимости от масштаба;
- большой высотой строчных букв (x-высота);
- достаточно крупный в выбранном кегле;
- постоянными для буквенных форм параметрами (высота строчных букв и другие);
- уникальными литерами, которые не спутать друг с другом, например, 0 и О;
- с поддержкой всех необходимых знаков и стилей.
Используйте заголовки, чтобы обратить внимание пользователя на иерархию. Убедитесь, что заголовки отличаются от основного текста размером, толщиной, стилем, цветом. Это обеспечит их читаемость на фоне основного текста, похожесть друг на друга.
Определите высоту текста, оптимальную для чтения. Чем больше размер шрифта и толщина линий, тем больше должна быть высота строки. Для основного текста отношение интерлиньяжа к кеглю должно быть около 1.4–1.65, для заголовков — 1–1.3, для подписей и коротких строк — около 1.3. Строки, расположенные слишком плотно или слишком свободно, ухудшают читаемость текста, и глазу сложнее найти новую строку.
По теме
WCAG 2.1
Цвет и контраст
Убедитесь, что контраст между цветом текста и фоном достаточен.
Почему это важно. У Вали слабое зрение, и если контент недостаточно контрастный, она не может прочитать его.
Для увеличенного текста можно снизить контрастность до 3:1. Увеличенный — это текст с минимальным размером 18 пунктов нормального или 14 пунктов полужирного начертания.
Исключения:- логотипы или элементы, выполняющую декоративную роль
- неактивные контролы.
Проверить контрастность можно с помощью плагинов и программ:
Убедитесь, что для информирования или разметки использованы дополнительные способы, помимо цвета.
Почему это важно. Дима не различает зеленый и красный цвета, поэтому не может знать, что поле, выделенное красным, сообщает об ошибке.
Не полагайтесь на цвет как на единственное визуальное средство передачи информации. Используйте полужирное начертание, звездочки, иконки, типографику, текст, отметьте обязательные поля и т. д.
По теме
WCAG 2.1
Графика и изображения
Убедитесь, что пользователю понятен контент, включающий графики, иконки и изображения.
Почему это важно. Мария использует мобильный телефон для просмотра веб- сайтов. Ей тяжело разглядывать мелкий шрифт на картинках и графиках.
Иван — слепой, он не может использовать карты или прочитать капчу.
Графика
Не используйте графику, если с той же задачей может справиться текст.
Убедитесь, что вся графика сопровождаются кратким и понятным описанием.
Используйте иконки как дополнительные визуальные подсказки, а не как украшения, и только там, где они нужны. Выбирайте привычные иконки, например, мусорный контейнер для удаления.
При наложении текста на картинку помните о контрастности: используйте сплошной фон или затемните изображение.
Визуализация данных
Для погружения пользователя в контекст сопровождайте визуализации кратким описанием.
Убедитесь, что данные и характеристики обозначены понятно.
Обеспечьте достаточный контраст между представляемыми данными, например линиями графиков, чтобы люди с дальтонизмом могли различить цвета.
Альтернативная версия
Создайте альтернативную форму для контента, который нельзя представить в виде текста. Например, поиск банкомата можно реализовать как через карту, так и через таблицу или список.
Капча возглавляет список самых сложных и частых проблем, с которыми сталкиваются слепые люди. Ее часто используют неоправданно с точки зрения безопасности; ее можно заменить на другие способы валидации. Если от капчи нельзя отказаться, сделайте альтернативный способ ее восприятия, например звуковой.
WCAG 2.1
Медиаконтент
Убедитесь, что глухие и слепые люди понимают ваш медиаконтент.
Почему это важно. Миша — глухой. Он смотрит фильмы и ролики на Youtube, включая субтитры.
Джо недавно приехал в Россию и не всегда воспринимает быструю русскую речь. Он использует субтитры, чтобы удостовериться, что он правильно понимает смысл.
Чтобы иностранец или глухой человек воспринял ваш аудиоконтент, сопроводите его субтитрами или транскриптом текста.
Примеры видео с субтитрами и отдельной текстовой версией.
Не используйте опасные для здоровья элементы дизайна. Убедитесь, что у вас нет элементов, вспыхивающих более трех раз в секунду.
У людей с некоторыми видами нарушений анимированные элементы сайта, логотипы или реклама могут привести к приступу эпилепсии.
Громким скандалом обернулся анимированный логотип Олимпиады 2012 в Лондоне, который спровоцировал двенадцать зарегистрированных приступов эпилепсии в течение нескольких часов после появления в интернете.
WCAG 2.1
Формы
Убедитесь, что есть инструкции и подсказки, которые помогают пользователю избежать ошибки.
Почему это важно. У Марьяны появились первые признаки деменции и возникают проблемы с краткосрочной памятью. Ей необходимы контекстные подсказки и инструкции, которые не пропадают с экрана, иначе она теряется.
Марк использует экранную лупу, и когда информационные сообщения появляются с краю экрана, он их не замечает.
Убедитесь, что у всех элементов ввода есть понятные лейблы-названия, которые остаются видимыми даже после заполнения поля.
Предупредите пользователя заранее о формате данных: даты, телефона, ИНН и т. д. При включенном CAPS LOCK хороший тон — предупредить пользователя об этом.
Если на экране в результате действий пользователя появилась какая-то информация, которой до этого не было, пользователь должен об этом узнать. Например, при нажатии на поле ввода появляется клавиатура, символ «8» заменяется на «+7» , когда пользователь пишет номер телефона и т. п.
Убедитесь, что есть инструкции, которые помогают пользователю исправить ошибку.
WCAG 2.1
Подписи и инструкции
Убедитесь, что подписи к элементам явно дают понять, что произойдет после нажатия на них.
Почему это важно. Паша — незрячий. Для переключения между элементами страницы он использует клавишу Tab, и программа экранного доступа зачитывает текст, который находится в фокусе. Ссылка вроде «editpage.action?pageId=505480722» будет для него бессмысленной.
Из текста ссылки должно быть понятно, что произойдет по клику. Не используйте как ссылку прямой адрес или текст «нажмите здесь»: они неинформативны. Вместо «нажмите здесь», напишите «скачать отчет». По названию кнопки «Создать аккаунт», в отличие от «Готово», пользователь четко понимает, что произойдет на следующем шаге.
Ссылки следует вписывать в текст так, чтобы они были частью предложения. Например, лучше написать «в новой версии приложения для Айфона мы добавили поддержку кириллицы» вместо «в новом приложении для Айфона мы добавили поддержку кириллицы. Скачать». Такое предложение удобнее и для зрячего пользователя.
Если клик приведет к скачиванию документа, напишите об этом прямо. Если вы ссылаетесь на файл в формате PDF, так и напишите: «Скачать инструкцию в PDF». Это важно для пользователей мобильных устройств, у которых может быть ограничен трафик.
Убедитесь, что инструкции может выполнить человек без слуха и зрения.
Не делайте отсылок к форме, размеру, визуальному расположению или звуку. Слепому ничего не говорит подсказка «Смотрите изображение выше» или «Руководство находится в правой колонке». Глухой человек не сможет выполнить инструкцию «Продолжите после звукового сигнала», «Подтвердите перевод через колл-центр».
WCAG 2.1
Области нажатия
Убедитесь, что области нажатия элементов достаточно большие и легко доступны.
Почему это важно. У Аркадия опухоль гипофиза. Из-за этого у него очень большие пальцы, которыми сложно попасть по маленьким или стоящим близко друг к другу ссылкам.
Лиля читает свежие новости в телефоне по дороге на работу в переполненном метро, потягивая кофе из стаканчика в другой руке. Телефоном она управляет одной рукой.
Удостоверьтесь, что дотягиваетесь до основных контролов большими пальцами и левой, и правой руки, даже на больших телефонах.
Задавайте области нажатия не меньше 44 CSS пикселей. Так по ним будет просто попасть пальцем среднестатистического взрослого — размер подушечки пальца как раз примерно 10 мм. Иконки часто бывают меньшего размера, поэтому нужно увеличить область нажатия вокруг них.
Разделяйте кликабельные элементы 8-пиксельным пробелом. Это позволит пользователю попадать по нужному ему элементу.
WCAG 2.1
Доступ с клавиатуры
Убедитесь, что при управлении с клавиатуры пользователю очевидно положение фокуса, а переход между элементами логичен.
Почему это важно. У Васи воспаление сухожилий и он не может пользоваться мышью. Для навигации в интернете он пользуется клавиатурой. Когда фокус прыгает по странице рандомно, она теряется.
Семён — слепой, он использует скринридер для навигации в интернете. Когда всплывает модальное окно, которое не получает клавиатурный фокус, он даже не знает, что оно появилось.
Пользователь должен иметь возможность выбрать и активировать любой интерактивный элемент на странице с помощью клавиш Tab, пробела и стрелок.
Для зрячих пользователей важно чтобы интерактивные элементы имели видимые и привычные состояния: focus, hover, active, и visited. Для незрячих пользователей важна функция, позволяющая перейти к основному контенту. Она дает возможность пропустить рекламу и перепрыгнуть через длинную навигацию к главной информации веб-страницы, уменьшая количество контента, который они прослушивают.
Пользователь ждет, что фокус между элементами будет переключаться в логичном порядке: обычно это слева направо и сверху вниз. Иногда порядок переключения будет очевидным для вашей команды разработки. Но возникают и более сложные случаи; тогда необходимо отмечать порядок на прототипах и макетах.
Когда готова верстка, проверьте с помощью клавиши Tab, что при управлении с клавиатуры видно, где фокус. Особенное внимание уделите страницам, которые используют JavaScript, и созданным без использования стандартных HTML-элементов.
