Представьте кнопку «Читать дальше», которая появляется только при наведении мыши. Человек, пользующийся клавиатурой, может её так и не найти. На телефоне она тоже легко теряется, особенно если в экран светит солнце. Доступный дизайн начинается с подобных деталей: страницу должно быть удобно читать и использовать, даже если посетитель воспринимает её или управляет устройством не так, как ожидал автор сайта.
Речь не об отдельной «упрощённой версии» для небольшой группы людей. Доступность — свойство обычной страницы: текст можно прочитать, элементы различить, действие выполнить, ошибку исправить. Для человека с нарушением зрения, слуха или моторики от этого может зависеть сам доступ к информации. А в повседневной жизни те же решения выручают в самых разных обстоятельствах: одной рукой держишь кота, другой листаешь телефон; ребёнок рядом делает уроки, поэтому видео смотришь без звука; к вечеру глаза устали, и мелкий серый шрифт хочется увеличить.
Условия меняются, потребность в понятном сайте остаётся
Постоянное ограничение, временная травма и обычное бытовое неудобство иногда требуют одного решения. По крупной кнопке проще попасть человеку, которому трудно точно управлять рукой, и родителю, который заглядывает в рецепт посреди кухонных хлопот. Субтитры нужны тем, кто не слышит звук, и тем, кто смотрит ролик в тихой комнате. Чёткие заголовки помогают и программе чтения с экрана, и читателю, который ищет в длинных воспоминаниях эпизод о питомце.
Но потребности посетителей не одинаковы. Субтитры не расскажут о важном действии, которое видно только в кадре, а крупный шрифт не сделает запутанную форму понятной. Хорошая страница даёт разные способы получить информацию и выполнить задачу, не заставляя угадывать, что имел в виду её автор.
Текст, который не приходится расшифровывать
Длинную статью легче читать, если заголовки называют тему раздела, абзацы не сливаются в сплошное полотно, а мысль не прячется за сложными оборотами. Например, «Как подготовить кошке тихое место» полезнее загадочного «Уголок спокойствия»: сразу ясно, нужен ли сейчас этот раздел. Структура помогает тем, кто читает подряд, и тем, кто перемещается по заголовкам с помощью вспомогательных технологий.
Причём заголовок должен быть заголовком и в устройстве страницы, а не просто крупно оформленным абзацем. Важно соблюдать и вложенность: подраздел относится к разделу выше, а не возникает неожиданно. Как в оглавлении домашней книги — открыл нужную главу, не перелистывая всё сначала.
Оформление тоже влияет на чтение. Мелкий текст на пёстром фоне, бледно-серые подписи и фразы, целиком набранные заглавными буквами, утомляют. Достаточный контраст, разборчивый шрифт и удобное расстояние между строками помогают при разном освещении. А если посетитель увеличит страницу, текст не должен уходить за край экрана или скрываться под другими элементами.
Ясность не требует сухого языка. В семейном блоге есть место и интонации, и деталям, и воспоминаниям. Но там, где читателю нужно что-то сделать, лучше говорить прямо: «Отправьте форму, и мы ответим по электронной почте» понятнее, чем «Оставайтесь на связи для дальнейшей коммуникации».
Кнопки и ссылки, которые можно найти и использовать
Не все пользуются мышью. Кто-то переходит между элементами клавишей Tab, подтверждает выбор клавишей Enter или управляет страницей другим способом. Ссылки, кнопки и поля должны получать фокус в понятном порядке, а сам фокус — быть заметным. Если его обводку убрали ради «чистого» оформления, человек нажимает Tab, но не видит, где оказался.
Подпись ссылки должна быть понятна и отдельно от соседнего текста. «Расписание школьных занятий» говорит больше, чем «Узнать больше». На кнопке лучше назвать действие: «Отправить сообщение» вместо «Готово». Так проще ориентироваться и тем, кто пользуется программой чтения с экрана, и всем остальным. Если подбираете формулировки для собственного сайта, пригодится материал о том, что написать на кнопке сайта, чтобы посетитель понял следующий шаг.
Важно и то, насколько легко нажать на элемент. В крошечный значок меню рядом с другим значком трудно попасть пальцем даже без ограничений моторики, особенно в движущемся транспорте. Соседним действиям нужен промежуток, а важным кнопкам — удобная для касания область. Цвет не должен оставаться единственной подсказкой: если написать только «поля с ошибкой отмечены красным», часть посетителей не поймёт, что исправлять. Лучше добавить пояснение рядом с каждым таким полем.
Изображения и видео без потери смысла
Фотография хорька, свернувшегося клубком, может просто передавать настроение семейной записи. Тогда хватит краткого альтернативного описания: «Хорёк спит в мягком пледе». Если снимок показывает, как устроено укрытие для питомца, в описании нужны детали, без которых совет будет непонятен. Перечислять всё, что попало в кадр, не требуется: важен смысл изображения именно здесь, на этой странице. А чисто декоративные элементы не стоит без нужды отдавать на озвучивание программе чтения с экрана.
Текст, помещённый внутрь картинки, сложнее увеличить, скопировать и прочитать с помощью вспомогательных средств. Расписание домашнего чтения или список вещей для прогулки лучше разместить обычным текстом, даже если рядом есть красивая карточка. Важные сведения из диаграммы или схемы тоже стоит пояснить словами.
Для видео нужны точные субтитры: они передают речь и значимые звуки. Автоматическую расшифровку стоит перечитать — имена, детские слова и названия пород она нередко распознаёт неверно. Если смысл в действии без слов, например в последовательности сборки кормушки, одних субтитров мало. Можно проговорить происходящее в видео или дать пояснение рядом. А запись, которая запускается автоматически, посетитель должен иметь возможность остановить: движение и звук не должны захватывать внимание без спроса.
Формы, в которых ошибка не превращается в тупик
Даже короткая форма подписки на семейные заметки может оказаться неудобной. Название поля должно оставаться видимым после ввода: подсказка внутри пустой строки исчезает, как только человек начинает печатать. Обязательные поля лучше обозначать словами, а не одной звёздочкой или цветом. Если в адресе почты опечатка, «Некорректные данные» мало поможет. Сообщение должно назвать поле, которое нужно проверить, а уже введённый текст — сохранить.
После отправки важно показать результат. «Сообщение отправлено» снимает вопрос, дошло ли оно; бесконечно вращающийся значок — нет. Если отправка не удалась, нужен понятный способ попробовать снова. На телефоне это особенно ценно: длинный текст неудобно набирать повторно, да и не хочется гадать, не отправил ли ты форму дважды.
С ограничением времени стоит быть осторожнее. Если форма очищается после нескольких минут бездействия, человек может потерять написанное, потому что читал медленно или отвлёкся на ребёнка. Когда ограничение необходимо, о нём лучше предупредить заранее и, если возможно, дать продлить сеанс.
Как заметить препятствия на собственной странице
Одна проверка не докажет, что сайт доступен каждому. Автоматические инструменты находят лишь часть ошибок, а опыт одного проверяющего не отражает опыт всех посетителей. Зато короткий ручной обход часто помогает заметить препятствия ещё до публикации.
- Пройдите страницу клавиатурой. Начните сверху и переходите клавишей Tab по ссылкам, кнопкам и полям. Видно ли, где сейчас фокус? Логичен ли порядок? Получается ли закрыть открытое меню без мыши?
- Увеличьте страницу и откройте её на узком экране. Проверьте, не обрезается ли текст, не перекрывают ли кнопки друг друга и не прячутся ли важные действия за неподвижными панелями.
- Посмотрите страницу без звука и без изображений. Сохраняется ли смысл видео? Понятно ли из текста, что показывает важная фотография или схема?
- Сделайте ошибку в форме. Оставьте обязательное поле пустым или введите адрес с опечаткой. Сообщение должно объяснить, что исправить, не стирая остальные ответы.
Для более глубокой проверки нужны знания о вспомогательных технологиях и, по возможности, участие людей с разным опытом их использования. Стоит также оставить посетителям возможность сообщить о трудности: даже проверенная страница может вести себя иначе на незнакомом устройстве.
Начать можно с одного действия на своей странице. Откройте форму обратной связи: если в первом поле название исчезает при вводе, поставьте над строкой постоянную подпись «Адрес электронной почты». Затем отправьте форму с пустым полем и посмотрите, названо ли оно в сообщении об ошибке — и сохранилось ли всё, что вы уже успели написать.