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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

h2 {
content: "НЕ НАДО ТАК";
}
<span class="icon icon-key" aria-hidden="true"></span>

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

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

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

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

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

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

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

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

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

При помощи атрибута 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” становится видна при фокусировке

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

Иногда имеет смысл отображать контент визуально, но скрывать его от программ чтения с экрана, например, в случаях с иконками. В этом случае добавьте атрибут 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% женщин имеют разные формы расстройства цветового восприятия. Многие из этих нарушений уменьшают чувствительность к контрасту, а в некоторых случаях лишают способности различать цвета.

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

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

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

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

Кевин Маркс

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

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

Коэффициент контрастности в Dev Tools браузера Chrome.
  • tota11y
    Великолепное расширение для определения контраста, структуры документа и многого другого.
  • aXe
    “Автоматизированный инструмент поиска дефектов доступности на вашем сайте”

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

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

Настройка контраста в Windows
Форма авторизации с разными схемами высокой контрастности
Улучшенная форма авторизации с границами полей и кнопки при разных схемах высокой контрастности
/* Режим высокой контрастности включен */
@media (-ms-high-contrast:active) {
}
/* Режим высокой контрастности со схемой "черное на белом" */
@media (-ms-high-contrast:black-on-white) {
}
/* Режим высокой контрастности со схемой "белое на черном" */
@media (-ms-high-contrast:white-on-black) {
}
  • Ссылка или элемент управления сами должны соответствовать требованиям и быть максимально контрастными.
  • Новая страница должна содержать всю ту же информацию и функционал, что и основная страница.
  • Новая страница должна соответствовать всем предъявляемым требованиям.

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

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

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

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

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

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

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

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

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

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

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

a:focus {
background-color: #000000;
color: #FFFFFF;
}
Не удаляйте стили фокуса по умолчанию, не предоставляя альтернативу (Источник: outlinenone.com)

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

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

Блок с табами, подсвеченный голубой обводкой при клике мышью. Chrome (Источник: frend.co)
/* Убираем стандартную обводку */
:focus {
outline: none;
}
/* И подсвечиваем элемент только тогда, когда это действительно необходимо */
:focus-ring {
outline: 2px solid blue;
}
/* Если JavaScript работает, то у всех элементов, не имеющих класс .focus-ring, обводка будет удаляться */
.js-focus-ring :focus:not(.focus-ring) {
outline-width: 0;
}

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

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

Форма, которой добавляется тень, если один из дочерних элементов в фокусе
form:focus-within {
box-shadow: 0 0 4px 6px rgba(80,88,156,0.2);
}

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

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

Сетка с заголовком и элементами списка
<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>
.wrapper {
display: grid;
grid-template-columns: 120px repeat(2, 1fr);
grid-gap: 20px;
}
h2 {
grid-column: 2 / -1;
}
Сетка с заголовком и элементами списка. Только прямые потомки контейнера подчинились стилям
ul {
/* занимаем всю сетку */
grid-column: 1 / -1;
/* создаем еще один грид и наследуем свойства родительского контейнера */
display: inherit;
grid-template-columns: inherit;
grid-gap: inherit;
/* переопределяем для браузеров, которые поддерживают display: contents */
display: contents;
}

Заключение

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

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

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

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

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

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

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

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

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

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC