Digital-доступность понимает под собой практику создания цифрового контента и приложений для широкого круга лиц, включая людей с ограниченными возможностями зрения, слуха, речи, двигательными и когнитивными нарушениями.
Существует миф, что сделать веб-сайт доступным сложно и дорого, но на деле это не так. Даже при создании сайта, отвечающего требованиям доступности, с нуля, не понадобятся дополнительные функции или особый контент. Поэтому вам не придется прилагать дополнительных усилий и вы не понесете лишних расходов.
Впрочем, доработка уже функционирующего сайта с низким уровнем доступности может потребовать некоторых усилий. Когда я работал в Carbon Health, мы проверили доступность нашего сайта с помощью AXE Chrome Extension. Только на главной странице мы нашли 28 нарушений, которые нам предстояло исправить. Казалось, что это будет сложно. Но мы обнаружили, что те нарушения было не так уж трудно починить — требовалось только посвятить этому время и исследовать возможные решения. Уже через пару дней мы справились — нарушений стало ноль.
Я хочу поделиться с вами несколькими простыми шагами, которые мы тогда предприняли, чтобы вы тоже могли сделать ваши сайты более доступными. Эти принципы направлены на доступность и в вебе, и на мобилках.
Но прежде чем мы начнём, давайте поговорим о том, почему это важно.
ЗАЧЕМ СОЗДАВАТЬ ДОСТУПНЫЙ ДИЗАЙН?
У нас, дизайнеров, есть сила и ответственность, чтобы обеспечить каждому доступ к тому, что мы создаём — вне зависимости от возможности, контекста, или ситуации. Когда мы делаем наш дизайн доступным, продукт становится еще удобнее в использовании для каждого — это ведь прекрасно.
Более 56 миллионов людей (практически каждый пятый) в Соединенных Штатах и более 1 миллиарда человек во всём мире имеют ограниченные возможности. В 2017 году в суды штатов и федеральный суд США было подано 814 судебных исков на предмет доступности вебсайтов. Уже эти два факта должны убедить нас в том, как важно создавать доступный дизайн.
Помимо этого, существует веское экономическое обоснование для обеспечения доступности: согласно исследованиям, доступные вебсайты демонстрируют лучшие поисковые выдачи, охватывают бОльшую аудиторию, они лучше ориентированы для SEO и показывают более быстрое время загрузки, они поощряют лучшие практики в разработке, и юзабилити у них всегда лучше.
Семь рекомендаций, которые приведены ниже, относительно легко реализовать. Они помогут вашим продуктам приблизиться к соответствию уровню AA в Web Content Accessibility Guidelines (WCAG 2.0) и корректно работать с наиболее часто используемыми вспомогательными технологиями — включая скринридеры, экранные лупы и инструменты распознавания речи.
1. ДОБАВЬТЕ КОНТРАСТА В ЦВЕТ
Цветовому контрасту как одной из проблем веб-доступности часто не уделяют достаточного внимания. Слабовидящие люди с трудом считывают текст с фонового цвета с низкой контрастностью. В своём докладе о зрительных расстройствах и слепоте Всемирная организация здравоохранения (ВОЗ) оценивает количество людей с умеренными или серьезными нарушениями зрения в 217 миллионов человек. Поэтому достаточный контраст между текстом и фоном так важен.
По утверждению W3C, коэффициент контрастности между текстом и фоном должен достигать хотя бы 4,5 к 1 (уровень соответствия AA). Этот коэффициент может быть ниже для крупных и массивных шрифтов, которые легче читаются при более низкой контрастности. При шрифте с кеглем в 18 пт или 14 пт жирным начертанием, минимальный уровень контрастности должен составлять 3 к 1.
Есть инструменты, которые помогут быстро проверить уровень контрастности. Если вы используете Mac, я рекомендую приложение Contrast app, с которым можно моментально проверить контрастность с помощью селектора цвета. Если вы хотите получить более детализированную оценку, я рекомендую вбить значения цвета в WebAIM color contrast checker. Этот инструмент посчитает результат как для обычного, так и для крупного кегля, учитывая различные уровни соответствия (А, АА, ААА). Можно изменять значения цвета и видеть результаты в реальном времени.
2. ЧТОБЫ СДЕЛАТЬ ВАЖНУЮ ИНФОРМАЦИЮ ПОНЯТНОЙ, МАЛО ИСПОЛЬЗОВАТЬ ТОЛЬКО ЦВЕТ
Когда вы подаёте какой-то важный материал, не показывайте действие или ответную реакцию, используя один только цвет — он не может выступать сольным визуальным ориентиром. Людям с низкой остротой зрения или дальтонизмом будет нелегко понимать ваш контент.
Постарайтесь использовать какой-нибудь дополнительный индикатор помимо цвета — текстовую подпись или паттерн. Когда ошибка появляется, она не должна быть визуализирована только через цвет — добавьте иконку или заголовок к сообщению. Подумайте о том, чтобы добавить визуальную подсказку — например, изменить насыщенность шрифта или его стиль — сделать подчеркнутым, чтобы выделить ссылки в тексте.
Элементы с более комплексной информацией (таблицы, графики и диаграммы) особенно сложно читаются, если вы используете только цвет для разграничения данных. Для сообщения информации используйте визуальные аспекты — форму, ярлыки, размер. Также вы можете попробовать использовать различные узоры внутри ячеек с разной информацией, чтобы различия были более наглядными. Отличный пример исполнения этой рекомендации показан в режиме для нечувствительных к цвету (colorblind mode) в Trello. При активации режима надписи становятся более доступными за счёт добавления текстуры.
Лайфхак: распечатайте свою таблицу или график в черно-белом цвете и посмотрите, вся ли информация легко понимается. Также вы можете воспользоваться приложением вроде Color Oracle, которое в режиме реального времени продемонстрирует, что видят люди с наиболее частыми нарушениями зрения. Эти советы помогут вам убедиться в том, что информация на вашем сайте независима от цвета.
3. СОЗДАВАЙТЕ УДОБНЫЕ И РАЗЛИЧИМЫЕ ФОКУСНЫЕ СОСТОЯНИЯ
Вы ведь замечали голубые аутлайны — контуры, которые иногда появляются вокруг ссылок, текстовых полей и кнопок? Эти контуры называются индикаторами фокуса. По умолчанию браузеры используют псевдокласс CSS, чтобы эти контуры появлялись вокруг выбранных элементов. Вы можете посчитать эти установленные по умолчанию фокусные индикаторы несимпатичными, и даже в вас может победить желание скрыть их. И если вы действительно избавитесь от этого стиля «по умолчанию», позаботьтесь о том, чтобы на его месте появился другой.
Фокусные индикаторы помогают людям понимать, какой конкретный элемент выбран сейчас с клавиатуры, а также понимать, где именно они находятся на вашем сайте. Фокусные индикаторы используются слабовидящими людьми совместно со скринридерами, людьми с ограниченными двигательными возможностями либо с такими перенесенными заболеваниями, как кистевой туннельный синдром; а ещё опытными пользователями, которые просто предпочитают такой способ навигации. Ну и в целом некоторые люди используют клавиатуру как основной инструмент для навигации в интернете!
Ссылки, поля формы, виджеты, кнопки и команды меню — это те элементы, которые должны иметь возможность фокусировки. Следовательно, у них должен быть и фокусный индикатор, который будет зрительно выделять их среди других элементов.
Вы можете создать фокусные индикаторы, которые впишутся в стиль вашего сайта и подойдут вашему бренду. Фокусное состояние должно быть легко различимо и обладать хорошим уровнем контраста, чтобы выделяться среди остального контента.
4. КОРРЕКТНО РАЗМЕЧАЙТЕ ВАШ КОНТЕНТ
Заголовки показывают, где начинается контент — это теги текста, определяющие его стиль и назначение. Заголовки, помимо этого, выстраивают иерархию контента на странице.
Заглавия с крупными шрифтами помогают читателю лучше понимать порядок контента. Более того, скринридеры тоже используют тэги заголовка для чтения контента. Таким образом, слабовидящие люди получают общую картину страницы, читая заголовки в иерархическом порядке.
В разработке сайта важно грамотно использовать структурные элементы. HTML-элементы сообщают браузеру, контент какого типа они содержат и как именно браузер должен его отображать или обращаться с ним. Компоненты и структура страницы — это то, что упорядочивает дерево доступности. Это дерево обеспечивает работу скринридеров, которые используются слабовидящими людьми для «прослушивания» страницы.
Некорректное использование разметки негативно влияет на доступность. Не используйте HTML тэги только ради стиля. Скринридеры ориентируются на веб-страницах с помощью структуры заголовков (настоящих заголовков, не просто увеличенного текста с жирным начертанием) и их иерархии. Люди, приходящие на ваш сайт, могут послушать список всех заголовков, перепрыгнуть через контент в зависимости от типа заглавия, или сразу перейти к топовым заголовкам <h1>.