Have a voice in guiding the future of Google's developer brands. Share your thoughts in our survey.

Стили доступности

Мы изучили два важнейших столпа доступности, фокус и семантику. Теперь давайте рассмотрим третий, стиль. Эту обширную тему мы можем охватить тремя разделами.

  • Обеспечение стилизации элементов для поддержки доступности путем добавления стилей для фокуса и различных состояний ARIA.
  • Обеспечение нашим UI компонентам гибкости для увеличения и масшатбирования, чтобы они могли приспособиться к пользователям у которых есть проблемы с мелким шрифтом.
  • Выбор правильных цветов и контрастов, чтобы избежать доставки информации только через цвет.

Стилизация фокуса

Как правило, каждый раз, когда мы фокусируемся на элементе, мы полагаемся на встроенное в браузер кольцо фокуса (CSS свойство outline) для стилизации элемента. Кольцо фокуса полезно, так как без него невозможно сказать пользователю, использующему клавиатуру, какой элемент сейчас в фокусе. Контрольный список WebAIM в этом смысле требует чтобы было "Визуально видно, какой элемент страницы имеет текущий фокус клавиатуры (т. е., когда вы переходите по странице, вы можете видеть, где вы находитесь)."

form elements with a focus ring

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

Вы должно быть знакомы с добавлением состояния при наведении для вашего элемента, используя CSS :hover псевдокласс. Например, можно применять :hover для ссылки, чтобы изменить её цвет или фон, когда указатель мыши находится над ней. Похожий на :hover, вы можете использовать псевдокласс :focus для элемента в фокусе.

/* Вы можете хотя бы добавить  элементу такой же стиль фокуса, как и стиль при наведении */
:hover, :focus {
  background: #c0ffee;
}

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

Модальность ввода

a native HTML button with a focus ring

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

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

<style>
  fake-button {
    display: inline-block;
    padding: 10px;
    border: 1px solid black;
    cursor: pointer;
    user-select: none;
  }

  fake-button:focus {
    outline: none;
    background: pink;
  }
</style>
<fake-button tabindex="0">Click Me!</fake-button>

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

В Firefox CSS псевдокласс :-moz-focusring позволяет вам писать стиль фокуса так, что он будет применяться только если элемент оказался в фокусе с использованием клавиатуры. Довольно удобная функция. Пока этот псевдокласс поддерживается только в Firefox ведется работа по его стандартизации.

Существует также отличная статья Alice Boxhall и Brian Kardell, которая исследует тему модальности и содержит прототип кода для разграничения ввода с клавиатуры и мыши. Вы можете использовать их решение сегодня, а псевдокласс кольца фокуса включить позже, когда он получит более широкую поддержку.

Стилизация состояний, с помощью ARIA

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

Например, рассмотрим переключатель, который переходит в состояние "pressed" при нажатии и сохраняет это состояние до тех пор, пока он не будет нажат снова. Для стилизации состояния ваш JavaScript может добавлять переключателю класс pressed. И, так как вы хотите хорошую семантику на всех компонентах, вы должны установить атрибут aria-pressed в значение true.

Будет полезно вообще удалить класс и просто использовать ARIA атрибуты для стилизации элемента. Сейчас вы можете обновить CSS селектор для нажатого состояния кнопки с такого

.toggle.pressed { ... }

на такой.

.toggle[aria-pressed="true"] { ... }

Это создаёт логическую и семантическую связь между ARIA состоянием и внешним видом элемента, также сокращает код.

Адаптивный дизайн для множества устройств

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

Рассмотрим сайт Udacity.com:

Udacity.com at 100% magnification

Пользователи с плохим зрением, для которых чтение мелкого текста затруднено, могут увеличивать страницу, возможно до 400%. Так как сайт спроектирован адаптивно, интерфейс будет перестраиваться для "меньшего вьюпорта" (фактически для большей страницы), что отлично подходит для пользователей настольных компьютеров, которым требуется увеличение экрана, и для пользователей, которые читают с мобильного экрана. Это беспроигрышный вариант. Ниже представлена та же страница, увеличенная на 400%:

Udacity.com at 400% magnification

Фактически, просто путем гибкого проектирования, мы встречаемся с правилом 1.4.4 из контрольного списка WebAIM, который утверждает, что страница "...должна быть читаемой и функциональной, когда размер текста удваивается."

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

  • Во-первых, убедитесь, что всегда используете соответствующий мета тег viewport.
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Настройка width=device-width будет соответствовать ширине экрана в аппаратно-независимых пикселях, а настройка initial-scale=1 установит соотношение 1:1 между CSS пикселями и аппаратно-независимыми пикселями. Выполняя эти инструкции браузер растягивает ваш контент до ширины экрана, так что пользователи увидят не просто кучу обрезанного текста.

a phone display without and with the viewport meta tag

  • Еще один метод, который следует держать в уме это проектирование с адаптивной сеткой. Как вы видели на сайте Udacity, проектирование с помощью сетки означает, что ваш контент будет перерисовываться при изменении размера страницы. Часто эти макеты создаются с использованием относительных единиц, таких как проценты, ems, или rems, вместо жёстких значений в пикселях. Преимущество такого подхода в том, что текст и контент могут увеличиваться и заставлять другие элементы смещаться вниз по странице. Так DOM и порядок чтения остаётся прежним, даже если расположение меняется из-за увеличения.

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

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

Минимальный рекомендуемый размер области касания примерно 48 аппаратно-независимых пикселей на сайте с правильно установленным мобильным viewport. Например, в то время как иконка может иметь ширину и высоту 24px, вы можете добавить дополнительные отступы, чтобы увеличить область касания до 48px. Область в 48x48 пикселей соответствует примерно 9мм, что является, примерно, размером подушечки пальца человека.

a diagram showing a couple of 48 pixel touch targets

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

Цвет и контраст

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

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

Руководства WebAIM рекомендует контрастность АА (минимум) 4.5:1 для всего текста. Исключение сделано для очень большого текста (на 120-150% больше чем размер текста по умолчанию), для которого контрастность может быть снижена до 3:1. Обратите внимание на разницу в коэффициентах контрастности, показанных ниже.

comparison of various contrast ratios

Контрастность 4.5:1 была выбрана для уровня AA потому что она компенсирует потери чувствительности контраста, обычно испытываемую пользователями с потерей зрения приблизительно равной 20/40. Обычно сообщается, что 20/40 это типичная острота зрения людей около 80. Для пользователей со слабым зрением или с нарушениями восприятия цвета мы можем увеличивать контраст текста до 7:1.

Вы можете использовать Расширение DevTools для доступности для Chrome, чтобы определить контрастность. Одно из преимуществ использования Chrome Devtools это то, что они будут предлагать АА и ААА (улучшенный) альтернативы вашему текущему цвету и вы можете кликнуть на значения, чтобы посмотреть на них в вашем приложении.

Для запуска аудита цвета/контраста выполните эти шаги.

  1. После установки расширения, кликните на Audits
  2. Снимите все, кроме Accessibility
  3. Кликните на Audit Present State
  4. Обратите внимание на предупреждения о контрастности

the devtools contrast audit dialog

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

Не передавайте информацию только через цвет

Около 320 миллионов пользователей имеют дефицит цветового зрения. Примерно 1 из 12 мужчин и 1 из 200 женщин имеют какую-то форму "цветовой слепоты"; что значит что примерно 1/20, или 5% ваших пользователей будут воспринимать ваш сайт не так, как вы ожидали. Когда мы полагаемся на цвет, для того, чтобы передать информацию, мы доводим это число до неприемлемого уровня.

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

an input form with an error underlined in red

Контрольный список WebAIM в секции 1.4.1 гласит, что "цвет не должен быть использован как единственный способ передачи контента или различия визуальных компонентов." Он также отмечает, что "один только цвет не должен использоваться для отличия ссылок от окружающего текста", если они не отвечают определенным требованиям контраста. Вместо этого контрольный список рекомендует добавление дополнительного индикатора, такого как подчеркивание (используя CSS свойство text-decoration), чтобы указать что ссылка активна.

Простейший способ исправить предыдущий пример это добавить дополнительное сообщение для поля, которое будет объявлять, что оно недопустимо, и почему.

an input form with an added error message for clarity

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

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

Высоконтрастный режим

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

Операционные системы, такие как Mac OSX и Windows предлагают высококонтрастные режимы, которые могут быть включены для всего на системном уровне. Либо пользователи могут установить расширение, например расширение Chrome High Contrast включает высокую контрастность только для конкретного приложения.

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

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

a navigation bar in high contrast mode

Аналогично, если вы рассматриваете пример из прошлого урока, красное подчеркивание на не верном поле "телефонный номер" может быть отображено в трудно различимом сине-зеленом цвете.

a form with an error field in high contrast mode

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

Translated by