Опубликовано: пятница, 26 января 2024 г. в 08:08

Ошибки доступности, встречающиеся при проведении аудита

Frontend

Источник: «Basic accessibility mistakes I often see in audits»

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

Использование заголовков для стиля, а не для структуры
Ссылки без href
Удаление стилей фокуса из фокусируемых элементов
Недостаточный цветовой контраст
Оборачивание кнопок в ссылки или ссылок в кнопки
Скрытые элементы, на которые всё ещё перемещается фокус
Отсутствие доступных названий
Отсутствие ARIA в интерактивных элементах

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

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

1. Использование заголовков для стиля, а не для структуры

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

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

Рассмотрим следующий порядок разметки…

<h1>All about pirates<h1>

<h2>The history of pirates</h2>
<p>...</p>

<h3>The early years</h3>
<p>...</p>

<h3>The golden age</h3>
<p>...</p>

<h2>Politics on the ship</h2>
<p>...</p>

<h2>Modern piracy</h2>
<p>...</p>

Основная тема страницы — All about pirates.
Заголовки h2 (The history of pirates, Politics on the ship и Modern piracy) — это заголовки основных разделов.
Заголовки h3 (The early years и The golden age) идут после заголовка h2 The history of pirates и перед заголовком h2 Politics on the ship. Они представляют собой подразделы The history of pirates.

Однако я часто вижу сайты, где уровни заголовков используются скорее для стиля, чем для смыслового значения, часто в секции "hero"…

<h5>For a limited time only</h5>
<h1>Buy the super awesome widget gizmo!</h1>
<h4>The ultimate new-fangled thingamadoodad...</h4>

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

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

h1, h2, h3, h4, h5, h6 {
 font-family: sans-serif;
 line-height: 1.4;
 margin: 0 0 1em;
 padding: 0;
}

h1,
.h1 {
 font-size: 1.5em;
 padding-top: 0.5em;
}

h2,
.h2 {
 font-size: 1.3125em;
 padding-top: 1em;
}

h3,
.h3 {
 font-size: 1.1875em;
}

h4, h5, h6,
.h4, .h5, .h6 {
 font-size: 1em;
}

Тогда вы сможете делать такие вещи…

<p class="h5">For a limited time only</p>
<h1>Buy the super awesome widget gizmo!</h1>
<p class="h4">The ultimate new-fangled thingamadoodad...</p>

2. Ссылки без href

Я часто вижу ссылки без атрибута href, например, такие…

<a class="btn" data-join>Join Now</a>

В ссылке нет href, потому что она контролируется с помощью JavaScript.

Иногда она ведёт себя как button, и в этом случае она должна быть просто быть ей. В других случаях она действительно куда-то перемещает, но приложение — это SPA, поэтому маршрутизацией занимается JS.

В любом случае браузер воспринимает ссылку без href как неинтерактивный элемент. Она исключена из обычного порядка фокусировки и по умолчанию не отображает указатель как ссылка.

Если элемент действует как button, используйте элемент button. Если нет, включите href и event.preventDefault() в свой JavaScript.

3. Удаление стилей фокуса из фокусируемых элементов

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

/* Не делайте так! */
a, button, input, textarea, select {
 outline: 0;
}

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

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

4. Недостаточный цветовой контраст

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

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

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

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

5. Оборачивание кнопок в ссылки или ссылок в кнопки

Я видел этот паттерн в нескольких аудитах…

<a href="/about"><button>About Us</button></a>

<!-- or... -->

<button><a href="/about">About Us</a></button>

В обоих случаях на странице была ссылка, которую они хотели стилизовать под кнопку.

Дело в том, что и кнопки, и ссылки имеют семантическое значение и передают разные вещи. Кнопка означает "это вызывает интерактивное поведение на этой странице", в то время как ссылка означает "вы перейдёте куда-то".

Использование обоих вариантов запутывает.

Вместо этого можно создать класс, в котором ссылки будут выглядеть как кнопки…

button,
.btn {
 background-color: #f7f7f7;
 border: #808080;
 border-radius: 0.25em;
 color: #272727;
 display: inline-block;
 padding: 0.5em 0.6875em;
}

button:hover,
.btn:hover {
 background-color: #0088cc;
 border-color:  #0088cc;
 color: #ffffff;
}

Затем примените его к своей ссылке следующим образом…

<a class="btn" href="/about">About Us</a>

6. Скрытые элементы, на которых всё ещё перемещается фокус

Изменения свойства display не могут быть анимированы.

В результате я часто вижу, как интерактивный контент скрывается, сдвигаясь за пределы экрана. Частым примером являются навигационные меню вне холста. Карусель изображений Swiper.js также делает это…

.nav.off-canvas {
  position: absolute;
  left: -10000px;
  top: auto;
  overflow: hidden;
}

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

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

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

Вместо этого используйте display: none или атрибут [hidden].

Вы можете использовать атрибут [inert], чтобы предотвратить переключение фокуса на содержимое. Это позволит вам запустить анимацию, если вы уберёте атрибут [inert], когда элемент станет видимым.

Руководство по сокрытию элементов в CSS

7. Отсутствие доступных названий

Я часто вижу это на кнопках и ссылках, которые содержат только иконку и не содержат текста.

Например, эта "любимая кнопка" содержит SVG-изображение сердца, но не содержит текста.

<button>
 <i class="icon icon-heart"></i>
</button>

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

Чтобы решить эту проблему, можно добавить атрибут [aria-label].

<button aria-label="Favorite This">
 <i class="icon icon-heart"></i>
</button>

Атрибут [aria-label] работает только с элементами, имеющими [role], либо неявный (как в случае с button, a и прочими), либо добавленный с помощью атрибута [role] (там, где это необходимо).

Кроме того, как отметил Адриан Розелли, [aria-label] часто не переводится программами автоматического перевода.

В качестве альтернативы вы можете использовать класс .visually-hidden, чтобы включить в HTML содержимое, доступно для программ чтения с экрана, но визуально скрытое.

/**
 * Визуально скрывает элемент, но оставляет его доступным для программ чтения с экрана
 * @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
 * @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 * @link https://github.com/h5bp/main.css/issues/12#issuecomment-321106995
 */
.visually-hidden {
 border: 0;
 clip: rect(0 0 0 0);
 height: 1px;
 overflow: hidden;
 padding: 0;
 position: absolute;
 white-space: nowrap;
 width: 1px;
}

<button>
 <i class="icon icon-heart"></i>
 <span class="visually-hidden">Favorite This</span>
</button>

Что приводит нас к последней ошибке…

8. Отсутствие ARIA в интерактивных элементах

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

Например, рассмотрим кнопку "favorite" в предыдущем примере.

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

Атрибут [aria-pressed] указывает, находится ли кнопка в данный момент в состоянии "нажата" или нет.

<!-- Этот пункт сейчас добавлен в избранное -->
<button aria-pressed="true">
 <i class="icon icon-heart"></i>
 <span class="visually-hidden">Favorite This</span>
</button>

Я часто сталкиваюсь с подобными проблемами при работе с компонентами аккордеона.

Запускающий заголовок должен быть элементом интерактивной кнопки/button и иметь свойство [aria-expanded], указывающее, показано ли соответствующее содержимое в данный момент или скрыто.

<!-- Этот контент в данный момент скрыт -->
<h2><button aria-expanded="false">What did pirates eat?</button></h2>
<div hidden>
 ...
</div>

Вы даже можете подключить атрибуты ARIA для стилизации!

button {
 background-color: #f7f7f7;
 border: #808080;
 border-radius: 0.25em;
 color: #272727;
 display: inline-block;
 padding: 0.5em 0.6875em;
}

[aria-pressed] {
 background-color: red;
 border-color: red;
 color: #ffffff;
}

W3C поддерживает коллекцию общих шаблонов с подробным описанием ожиданий в отношении ARIA, ролей, клавиатурной навигации и так далее.

Раньше её было трудно читать, но в последние годы она стала намного лучше!

Это первое место, куда я заглядываю при создании интерактивного компонента.

Это сложно

Доступность — это отдельная специальность. Часто это сложно!

Но знание основ и понимание того, где искать, если что-то не знаешь, — важная часть профессиональной деятельности.