Источник: Дриббл

Пишем CSS, не забывая о доступности

Введение в доступность в вебе. Советы по улучшению доступности ваших сайтов при помощи CSS.

Перевод статьи Мануэля Матузовича Writing CSS with Accessibility in Mind

Примерно год назад я стал уделять большое внимание доступности в вебе. Наиболее эффективный способ изучения чего-либо для меня — обучение других. Именно поэтому я выступаю на митапах и конференциях и пишу статьи по этой теме. Я написал статью Progressive Enhancement для Smashing Magazine и статью об основах доступности здесь, на Медиуме. Эта статья будет третьей в серии советов и трюков по доступности. У статьей не существует четкой последовательности, вы можете прочитать Writing HTML with accessibility in mind и Writing JavaScript with accessibility in mind (примечание переводчика: планируются к переводу) сейчас или позже.

Я создал свой первый сайт примерно 17 лет назад, в ту пору, когда CSS был еще в новинку. Много воды утекло с тех пор, многое изменилось. В том числе CSS, который теперь представляет собой невероятный набор инструментов для стилизации веба. Мы прошли путь от Verdana до веб-шрифтов, от фиксированной ширины до отзывчивого веб-дизайна, от сетки на таблицах до гридов, и нам больше не нужно использовать картинки для бордеров, шрифтов или теней. У нас есть кастомные свойства, директива @supports, calc() и сотни других новых возможностей. Безусловно, это всего лишь одна из веток невероятных достижений в сфере разработки последних лет.

Пишите CSS, помня о доступности

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

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

В конечном итоге получилось больше, чем я ожидал. Поэтому вот вам удобное меню для навигации по разделам.

• От разборчивого до читабельного текста
• Осмотрительно используем content в псевдоэлементах
• Экран — не единственная среда взаимодействия
• Фолбэк для значений с частичной поддержкой
• Существует много способов спрятать контент
• Не доверяй плохому контрасту
• Цвет не должен быть единственным источником информации
• Позаботьтесь о порядке
• Фокусируемся важном: focus
• Гриды и прямой порядок документа

Наслаждайтесь!

От разборчивого до читабельного текста

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

Увеличение размера шрифта

Размер шрифта должен увеличиваться пропорционально дистанции между пользователем и экраном (Источник: Marvel)

Были времена, когда размер шрифта в 12px для основного текста был нормой, но с ростом количества девайсов с высоким разрешением размер шрифта на какое-то время устаканился в районе 15-18px. За последние годы он подрос до 20px и более, что вполне неплохо. Текст должен быть достаточно большим для чтения со смартфона. И должен расти с размерами экрана для того, чтобы читаться с большой дистанции на больших экранах, таких, как телевизор.

Поскольку характеристики шрифтов могут сильно отличаться, нет смысла договариваться о каком-то стандартном минимальном размере, но 18–20px прекрасно подойдут в качестве отправной точки для маленьких экранов.
Безусловно, это далеко не все, что можно сказать о размере шрифта, но это будет перебор для данной конкретной статьи. За бóльшим количеством деталей я советую обратиться к статье Your Body Text Is Too Small Кристиана Миллера.

Настройка высоты линии

Высота строки по умолчанию в браузерах составляет примерно 1.2. Согласно рекомендации Руководства по доступности веб-контента line-height должен быть не меньше 1.5 в абзацах внутри блоков текста.

Абзац с line-height: 1.2 в сравнении с абзацем с line-height: 1.5

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

Выравнивание текста по правому или левому краю

Неравномерные отступы между словами при text-align: justify

Несмотря на то, что некоторые из нас предпочитают распределенный текст выровненному по правому или левому краю (мол, он выглядит приятнее), это считается плохой практикой. text-align: justify изменяет расстояние между словами для создания строк одинаковой длины. Эти неравномерные отступы могут ухудшить читабельность текста и попросту отвлекать. Перенос слов в случае необходимости может быть неплохим решением, но перенос в CSS плохо поддерживается и может работать не так, как ожидалось.

Ограничение ширины абзаца

Согласно нескольким источникам, дизайнеры должны стремиться к ширине строки в 45–85 символов, поскольку предполагаемая комфортная ширина равна 65 символам.

При определении ширины текстового блока может пригодиться единица ch, поскольку 1ch равен ширине символа ноль (0). И он меняет свои размеры при изменении значений font-family и font-size.

p {
  /* Максимальная ширина в 65 символов */
  max-width: 65ch;
}

Если вы используете отзывчивую типографику, то не забудьте протестировать свой сайт на больших экранах. Если не установлена верхняя граница размера шрифта, то ваш текст может стать нечитабельным при определенном размере вьюпорта. Если вы не знаете, как задавать границы или если вы не знакомы с отзывчивой типографикой, то почитайте статью Майка Райтмюллера Precise control over responsive typography.

Осмотрительно используем content в псевдоэлементах

Мы можем использовать псевдоэлементы ::before и ::after, чтобы добавить CSS в самом начале или в самом конце элемента. Это позволяет нам просто и удобно добавлять оформительские элементы, но также это позволяет добавлять контент при помощи свойства content. С точки зрения принципа разделения ответственности мы не должны этого делать.

h2 {
  content: "НЕ НАДО ТАК";
}

Контент должен быть в HTML, в базе данных или приходить через API, но не в CSS. Иногда мы используем свойство content для добавления нетекстового контента, такого, как иконочные шрифты или спецсимволы. Если вы так делаете, то помните, что некоторые программы чтения с экрана распознают и проговаривают сгенерированный контент. Если созданный контент является чисто оформительским, то убедитесь, что он скрыт от всяческих ассистентов. Например, используйте aria-hidden.

<span class="icon icon-key" aria-hidden="true"></span>

Экран — не единственная среда взаимодействия

Несмотря на то, что мы живем в эру диджитализации, люди по-прежнему многое распечатывают. Убедитесь, что ваши страницы доступны для использования даже после распечатки или сохранения в PDF. Все, что вам нужно сделать — добавить блок @media в свой CSS и настроить стили элементов, которые выглядят плохо. Или вообще скройте элементы, не имеющие смысла на бумаге: навигацию, рекламу и т.д.

@media print {
  .header {
    position: static;
  }
  nav {
    display: none;
  }
}

Одна из ситуаций с распечатанными страницами — совершенная бесполезность ссылок. На бумажном носителе вы не знаете, куда они должны вести. К счастью, CSS дает нам возможность выводить значения атрибутов на экран (на бумагу в нашем случае).

@media print {
  a[href^="http"]:not([href*="mywebsite.com"])::after {
    content: " (" attr(href) ")";
  }
}

При помощи этих строк кода при печати после каждой ссылки, значение атрибута href у которых содержит http, и при этом не содержит mywebsite.com в адресе, в скобках будут отображаться url.

Firefox и особенно Chrome предлагают инструменты для тестирования и отладки стилей страницы при печати.

Если вы хотите копнуть глубже, я собрал несколько советов и трюков для работы со стилями печати.

Фолбэк для значений с частичной поддержкой

Иногда мы оказываемся в ситуации, когда хотим использовать определенное значение свойства, но не можем, поскольку оно поддерживается не во всех браузерах. Но до тех пор, пока мы обеспечиваем фолбэк, мы не должны ограничивать себя в использовании таких свойств. Часто нам даже не нужны директивы @supports или другие способы определения.
Предположим, вы хотите использовать значение в vmax, но IE и старые версии Edge его не понимают.

div {
  width: 50vmax; /* Не сработает в IE и старых версиях Edge */
}

Чтобы обеспечить фолбэк, вы просто устанавливаете значение свойства width в менее подходящих, но понятных этим браузерам единицах. Например, width: 50vw. Ниже, в следующей строке, вы задаете то значение, которое хотите.

div {
  width: 50vw;
  width: 50vmax;
}

Браузеры, которые не понимают vmax, будут выполнять строку width: 50vw и просто пропустят width: 50vmax. С другой стороны, браузеры, которые поддерживают эти единицы, сначала выполнят width: 50vw, а затем width: 50vmax. Поскольку объявление vmax находится после объявления vw, версия vmax — это то, что увидит пользователь.

Существует много способов спрятать контент

Заголовки в HTML очень полезны, когда дело доходит до составления структуры документа. Используя заголовки <h1> - <h6>, вы сообщаете браузеру и другому софту, как структурирован ваш документ и как связаны его части. Очень важно иметь четкую схему документа, это хорошо для SEO, и это помогает пользователям программ чтения с экрана перемещаться по вашему сайту. Может случиться так, что вам нужно внедрить дизайн, в котором нет заголовков, несмотря на то, что было бы разумно их иметь. Это случается, когда сам дизайн передает структуру. В таком случае не удаляйте заголовки из разметки, просто спрячьте их. Должно быть ясно, как ваш документ устроен с CSS или без него.
Это, конечно, всего лишь один пример. Другой пример — визуальное скрытие лейблов в формах (даже с точки зрения UX вы не должны скрывать лейблы).

В CSS есть несколько способов сокрытия контента, и вам решать, какой из методов скрытия выбрать в конкретной ситуации.

Прячьте контент ото всех

При помощи атрибута hidden, или правила visibility: hidden, или display: none вы прячете контент полностью. Пользователи не могут его увидеть, а программы чтения с экрана — прочитать.

Прячьте контент визуально

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

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

.visually-hidden {
  /* Удаляем элемент из потока документа */
  position: absolute;
  /* Временное решение для неверно произносимого, размазанного текста */
  white-space: nowrap;
  /* Устанавливаем минимально возможный размер (некоторые скринридеры игнорируют элементы с нулевой высотой и шириной) */
  width: 1px;
  height: 1px;
  /* Скрываем вылезающий за границы контент */
  overflow: hidden;
  /* Сбрасываем любые свойства, которые могут повлиять на размер элемента */
  border: 0;
  padding: 0;
  /* Вырезаем ту часть контента, которая должна отображаться. */
  /* Устаревшее свойство clip для старых браузеров */
  clip: rect(0 0 0 0);
  /* clip-path для новых браузеров. inset(50%) определяет область вставки, которая позволит контенту исчезнуть.  */
  clip-path: inset(50%); 
    /* Похоже, никто до конца не понимает, почему тут margin: -1px. Кроме того, это приводит к проблемам (читай: https://github.com/h5bp/html5-boilerplate/issues/1985). */
  margin: -1px;
}

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

Скрывающая ссылка

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

Ссылка “Skip to content” становится видна при фокусировке

Попробуйте сами эту демку (Code Pen): нажмите Tab, чтобы активировать скрывающую ссылку.

Прячьте контент семантично

Иногда имеет смысл отображать контент визуально, но скрывать его от программ чтения с экрана, например, в случаях с иконками. В этом случае добавьте атрибут aria-hidden к элементу, который вы хотите скрыть, и установите ему значение true.

<button>
  <span class="icon icon-hamburger" aria-hidden="true"></span>
  <span class="text">Menu</span>
</button>

Другие способы

Существуют и другие способы скрытия контента: отрицательный text-indent или нулевой font-size или height. Хотя некоторые из них вполне рабочие, стоит использовать их с осторожностью. Прочтите статью Techniques for hiding text на webaim.org.

Не доверяй плохому контрасту

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

Что такое цветовой контраст и почему это важно

По данным Всемирной организации здравоохранения, около 4% населения имеют ограничения зрения. От 7 до 12% мужчин и менее 1% женщин имеют разные формы расстройства цветового восприятия. Многие из этих нарушений уменьшают чувствительность к контрасту, а в некоторых случаях лишают способности различать цвета.

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

Минимальный коэффициент контрастности

Коэффициент контрастности показывает, насколько высока контрастность текста в определенных размерах и ширинах на определенном фоне. Соотношение может варьироваться от 1:1 до 21:1. Где 1:1 если оба цвета совпадают, а 21:1, если используются черные и белые цвета.

Коэффицент равен 3.3 для цвета текста #777777 на фоне цвета #DDDDDD. (Источник: коэффициент контрастности)

Согласно Руководству по доступности контента в вебе (WCAG) 2.0, мы должны соблюдать коэффициент контрастности не ниже 4.5:1 между фоном и текстом (или картинкой и текстом). Это применимо к тексту, если его размер меньше 24px (если не жирный) и меньше 19px (если жирный). Для текста большего размера достаточно коэффициента 3:1. Это минимальные цифры для соблюдения требований уровня АА. Для уровня ААА минимальный коэффициент контрастности 7:1 (для нормального текста) и 4.5:1 (для жирного текста). Об этом ничего не написано, но я считаю, что иконки тоже должны соответствовать этим требованиям.

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

Хотя мое зрение действительно подсело с возрастом, но оказалось что все это время я страдал из-за дизайн-трендов.

Кевин Маркс

Существует формула для расчета коэффициента контрастности, но не беспокойтесь и не кидайтесь искать свой старый калькулятор. Есть неплохие инструменты.

Измерение коэффициента контрастности

В Chrome Canary можно отображать коэффициент контрастности непосредственно в Инструментах разработчика. Реми Шарп делится подробностями у себя в блоге.

Коэффициент контрастности в Dev Tools браузера Chrome.

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

Онлайн

• коэффициент контрастности от Леи Веру
  Шустрый и простой плагин для браузера
• Colour Contrast Check от Джонатана Снука
  Проверка контраста в браузере и пара дополнительных опций
• Wave tool
  Инструмент для проверки контраста и не только
• Accessible Color Spaces от Кевина Гутовски
  Пипетка с автоматическим определением контраста

Расширения и инструменты разработчика

• Панель аудита в инструментах разработчика в Chrome
  В Chrome 60 встроенная новая панель аудита, разработанная Lighthouse. Среди прочего она оценивает доступность сайта и составляет список улучшений.
• tota11y
  Великолепное расширение для определения контраста, структуры документа и многого другого.
• aXe
  “Автоматизированный инструмент поиска дефектов доступности на вашем сайте”

Прочее

• Color Contrast Analyser for Sketch
  “Плагин для Sketch, считающий коэффициент контрастности двух слоев и оценивающий его на соответствие WCAG.”
• Больше инструментов для определения контраста

Опыты с высоким контрастом

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

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

В настройках Windows есть опция высокой контрастности. Пользователи могут определять свои собственные настройки цвета или выбирать предопределенную схему.

Настройка контраста в Windows

Я создал простенькую форму авторизации (на крайнем левом скрине; вдохновлялся https://dribbble.com/shots/1687064-Simple-Login-Form) и протестировал ее на разных схемах высокой контрастности.

Форма авторизации с разными схемами высокой контрастности

Аника Хенке написала о том, как пользователи меняют цвета на сайтах. Она описывает, что, тестируя форму, она обнаружила, что поля ввода стали невидимыми и кнопка нераспознаваемой. Вы можете видеть то же самое на приведенном выше скриншоте. Если бы не текст плейсхолдера, пользователи не знали бы, что есть два поля ввода. Быстрый фикс заключался в добавлении границ по умолчанию для полей и кнопок (не проверялось в разных браузерах).

Улучшенная форма авторизации с границами полей и кнопки при разных схемах высокой контрастности

Вы можете использовать медиа-запросы, чтобы определить, активен ли режим высокой контрастности, и предоставить соответствующие стили.

/* Режим высокой контрастности включен */
@media (-ms-high-contrast:active) {
}
/* Режим высокой контрастности со схемой "черное на белом" */
@media (-ms-high-contrast:black-on-white) {
}
/* Режим высокой контрастности со схемой "белое на черном" */
@media (-ms-high-contrast:white-on-black) {
}

Патрик Х. Лауке делится своими мыслями и опасениями по поводу этих медиа-запросов для режима высокой контрастности Windows: ограниченная польза -ms-high-contrast. В ответ Грег Уитворт отметил, что «единственная цель этой функции — помочь пользователям с чувствительностью к контрасту улучшить опыт взаимодействия с интерфейсом. Таким образом, вы не должны заботиться о конкретных цветах. До определенной степени вам должно быть все равно, как выглядит ваш сайт. Но вам должно быть не все равно, как он функционирует в высоком контрасте ».

Расширение для Chrome, создающее высокий контраст

Существует расширение для высокого контраста для Google Chrome, которое позволяет пользователям просматривать веб-страницы с помощью нескольких высококонтрастных цветовых фильтров, облегчающих чтение текста.

Высококонтрастная альтернативная версия

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

Существуют некоторые критерии для подобных альтернативных версий:

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

Тестируем с помощью NoCoffee

NoCoffee симулирует плохое зрение, расстройства восприятия цвета и слепые пятна

Выработать критерии — это одно, но тесты на реальных пользователях — это другое. Не у всех есть средства для профессионального тестирования. К счастью, NoCoffee предоставляет нам быстрый и простой способ моделирования плохого зрения, расстройства восприятия цвета и слепых пятен. Это полезно для понимания проблем, с которыми сталкиваются люди, имеющие как незначительные, так и очень серьезные проблемы со зрением.

Цвет не должен быть единственным источником информации

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

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

Цветовое обозначение успешного заполнения или ошибки не срабатывает в режиме высокой контрастности

Добавление простеньких иконок может помочь улучшить доступность пользовательского интерфейса.

Другим примером являются ссылки. Они тоже не должны отличаться от обычного текста только цветом. Лучше всего оставлять у ссылок подчеркивание.

Позаботьтесь о порядке

Существует множество способов изменения порядка элементов. Например, есть order и flex-direction для флексбоксов или order, flex-auto-flow и, конечно, явное указание порядка для гридов. Хотя эти свойства действительно полезны, они могут разорвать связь между порядком в DOM и визуальным представлением контента.

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

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

Измененный, непредсказуемый порядок не понравится не только пользователям с клавиатурой (без мышки). Экранные читалки читают контент в порядке его следования в DOM. Софту все равно какой порядок в CSS, а вот пользователям — нет. Вы могли бы подумать, что пользователи экранных читалок не заботятся о визуальном представлении контента. Это не всегда так, потому что не все пользователи скринридеров слепы. Некоторые из них имеют плохое зрение или недостатки в обучении (например, не умеют читать) и используют программы чтения с экрана для дополнения того, что они видят на экране.

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

Посмотрите выступление Роба Додсона Does reordering content affect accessibility? и прочитайте статью Source Order Matters Адриана Роселли для более подробной информации.

Фокусируемся на важном: focus

Я уже писал о принципах навигации при помощи клавиатуры и элементах в фокусе в Writing Javascript with Accessibility in Mind. Прежде, чем продолжить чтение, быстренько пробегитесь по этой статье, если совершенно не знакомы с этой темой.

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

Есть пара вещей, которые вы можете сделать в CSS, чтобы стилизовать элементы, находящиеся в фокусе.

Выделяем элементы в фокусе

Вы можете выделить элементы в фокусе при помощи стилей для псевдокласса :focus.

a:focus {
  background-color: #000000;
  color: #FFFFFF; 
}

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

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

Не удаляйте стили фокуса по умолчанию, не предоставляя альтернативу (Источник: outlinenone.com)

Это не просто пожелание. Это требование уровня AA.

Разница между пользователем с клавиатурой и с мышью

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

Блок с табами, подсвеченный голубой обводкой при клике мышью. Chrome (Источник: frend.co)

Удалить свойство outline — не вариант, поскольку элемент больше не будет доступен для пользователей с клавиатурой. Мы должны разделить стили для пользователей с мышью и пользователей с клавиатурой. Это возможно при помощи псевдокласса :focus-ring, который является частью спецификации CSS4. «Псевдокласс :focus-ring срабатывает в тех же случаях, когда и пседокласс :focus, но при этом компьютер эвристически определяет, что фокус специально установлен на этом элементе» (Источник: CSS Selectors Level 4 Draft)
(Проще говоря, псевдокласс :focus-ring срабатывает в случаях навигации по странице без мыши)

/* Убираем стандартную обводку */
:focus {
  outline: none;
}
/* И подсвечиваем элемент только тогда, когда это действительно необходимо */
:focus-ring {
  outline: 2px solid blue;
}

К сожалению, на сегодняшний день браузеры не поддерживают :focus-ring (Firefox поддерживает -moz-focus-ring), но есть маленький полифил, который добавляет класс .focus-ring когда это необходимо.

/* Если JavaScript работает, то у всех элементов, не имеющих класс .focus-ring, обводка будет удаляться */
.js-focus-ring :focus:not(.focus-ring) {
    outline-width: 0;
}

Для более подробной информации смотрите выступление Роба Додсона Focus Ring!

Стили элемента при фокусе на дочерних элементах

:focus-within — относительно новый псевдокласс и уже поддерживается в большинстве основных браузеров. Он выбирает элемент с дочерними элементами, которые в настоящее время в фокусе.

Форма, которой добавляется тень, если один из дочерних элементов в фокусе

form:focus-within {
  box-shadow: 0 0 4px 6px rgba(80,88,156,0.2);
}

Вы можете видеть эту демку на CodePen.

Для углубления в тему основ фокуса посмотрите What is Focus? на YouTube.

Гриды и прямой порядок документа

Когда мы разрабатываем новый сайт, мы обычно начинаем с написания HTML. Мы выбираем правильную разметку и ставим элементы в логическом порядке. Когда документ валиден, хорошо структурирован и порядок обоснован, мы добавляем CSS. До появления гридов в CSS создание сетки могло стать непростой задачкой. Особенно, если порядок в DOM и порядок в дизайне не соответствовали друг другу. float, position и иногда даже флексбоксы были недостаточно гибкими для решения определенных задач, и у нас возникал соблазн изменить порядок DOM. Благодаря явному указанию порядка в гридах мы имеем достаточно гибкий инструмент, необходимый для позиционирования элементов. Это замечательно, но гриды также создают новое искушение.

Давайте представим, что у вас есть дизайн как на картинке и вы используете h2 и ul для элементов, потому что на ваш взгляд это очевидно.

Сетка с заголовком и элементами списка

<div class="wrapper">
  <h2>Heading</h2>
  <ul>
    <li><a href="#">Element 1</a></li>
    <li><a href="#">Element 2</a></li>
    <li><a href="#">Element 3</a></li>
    <li><a href="#">Element 4</a></li>
    <li><a href="#">Element 5</a></li>
    <li><a href="#">Element 6</a></li>
  </ul>
</div>

Разместить список в столбцы и расположить <h2> довольно просто… или по крайней мере выглядит так.

.wrapper {
  display: grid;
  grid-template-columns: 120px repeat(2, 1fr);
  grid-gap: 20px;
}
h2 {
  grid-column: 2 / -1;
}

Сетка с заголовком и элементами списка. Только прямые потомки контейнера подчинились стилям

Все выглядит не так, как вы ожидали. Проблема в том, что по сетке встали только прямые потомки грид-контейнера. В нашем случае это <h2> и <ul>. Но по нашей задумке стилям должны были подчиниться <li>. Худшее, что вы можете сделать в этом случае — поменять структуру документа, избавившись от <ul> и заменив <li> на <div> так, чтобы элементы стали прямыми потомками грид-контейнера.

Лучшим решением было бы задать <ul> свойство display: subgrid, но его нет в первом уровне спецификации и мы вынуждены ждать его появления.

Вы можете использовать display: contents для <ul>, но пока его поддерживает только Firefox. display: contents задает поведение непрямым потомкам так, как если бы они были прямыми дочерними элементами грид-контейнера, игнорируя элемент, в который они вложены.

В итоге мы вынуждены задать еще один грид для <ul>. Это не идеально, но все же лучше, чем подгонка структуры документа в ущерб семантике. Поскольку это очень простой пример и список занимает всю сетку, вы можете наследовать некоторые значения из родительского контейнера.

ul {
  /* занимаем всю сетку */
  grid-column: 1 / -1;
  /* создаем еще один грид и наследуем свойства родительского контейнера */
  display: inherit;
  grid-template-columns: inherit;
  grid-gap: inherit;
  /* переопределяем для браузеров, которые поддерживают display: contents */
  display: contents;
}

Вы можете увидеть оба решения в действии на CodePen.

Заключение

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

Создавая дизайн и помня о контрасте, вы создаете хороший дизайн.

Аарон Густафсон

Надеюсь, вам понравилось читать и узнавать что-то новое. Если у вас есть вопросы или какие-либо отзывы, пожалуйста, оставьте комментарий или напишите мне в twitter.

Благодарю своего наставника Аарона Густафсона за помощь в создании этой статьи.

Больше советов по доступности

Эта статья является третьей в серии из четырех. Последняя находится в разработке и ​​скоро увидит свет.

1. Writing HTML with accessibility in mind
2. Writing JavaScript with accessibility in mind
3. Writing CSS with accessibility in mind
4. Up next: Learn how to design and develop with accessibility in mind

Благодарю вас за чтение. Пожалуйста, не забудьте «похлопать» и поделиться этой статьей, если она вам понравилось.

Пока я работаю над следующим постом, вы можете почитать другие статьи, которые я написал:

Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid

The Difference Between Explicit and Implicit Grids | CSS-Tricks

Литература и ресурсы для дальнейшего изучения

От разборчивого до читабельного текста

• Your Body Text Is Too Small, Кристиан Миллер
• How the Web Became Unreadable, Кевин Маркс
• Why is Vertical Rhythm an Important Typography Practice?, Зели Лью
• Precise control over responsive typography, Макй Райтмюллер

Осмотрительно используем content в псевдоэлементах

• Accessibility support for CSS generated content, Леони Уотсон

Экран — не единственная среда взаимодействия

• I totally forgot about print style sheets, Мануэль Матузóвич

Фолбэк для значений с частичной поддержкой

• CSS and progressive enhancement, Майкл Санейгл

Существует много способов спрятать контент

• Techniques for hiding text
• Beware smushed off-screen accessible text, Рене Бич
• a11y.js: Hiding DOM elements
• Bulletproof Accessible Icon Fonts , Зак Летерман

Не доверяй плохому контрасту

• How users change colours on websites, Аника Хенке
• Color Contrast And Why You Should Rethink It, Кэтти О’Конор
• What is Color Contrast?, Рейчел Р. Васкез
• A Beginner’s Guide to Contrasting Colors , Джеки Ховард Бир

Цвет не должен быть единственным источником информации

• Be Kind to the Color Blind, Крис Чемпбелл
• On Link Underlines, Адриан Роселли

Позаботьтесь о порядке

• Not All Screen Reader Users Are Blind, Адриан Роселли
• Source Order Matters, Адриан Роселли

Фокусируемся на важном: focus

• a11y.js: Default Browser Focus Outline Styles
• Keyboard-Only Focus, Роман Комаров

Гриды и прямой порядок документа

• Modern CSS Layout, power and responsibility, Рейчел Эндрю