Доступный аккордеон

Аккордеоны помогают удерживать длинные страницы в порядке: FAQ, доставка и возврат, сведения о товаре, группы фильтров. В APG он определён как «вертикально сложенный набор интерактивных заголовков, каждый из которых содержит название, фрагмент содержимого или миниатюру, представляющие раздел содержимого», — заголовки показывают или скрывают свои панели. На этой странице показана правильная разметка. Она входит в серию доступных UI-паттернов.

Когда использовать аккордеон

• Несколько независимых разделов, из которых пользователю нужны один-два: FAQ, размеры и уход, доставка и возврат.
• Мобильные раскладки, где вкладки не помещаются.
• Группы фильтров в боковой панели категории.

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

Применимые критерии WCAG

• 4.1.2 Имя, роль, значение (A): каждый заголовок — это кнопка с состоянием «развёрнуто» или «свёрнуто».
• 1.3.1 Информация и взаимосвязи (A): названия разделов — настоящие заголовки.
• 2.4.6 Заголовки и подписи (AA): заголовки описывают свой раздел.
• 2.1.1 Клавиатура (A) и 2.4.7 Видимый фокус (AA).
• 1.4.11 Контраст нетекстового контента (AA): значку «плюс» или шеврону, показывающему состояние, нужен контраст 3:1.
• 2.5.8 Размер цели (минимальный) (AA): целью служит вся строка заголовка, а не только значок.

Пример кода

<!-- APG accordion: heading > button, panel controlled by the button -->
<h3>
  <button type="button" id="acc-shipping" aria-expanded="true" aria-controls="panel-shipping">
    Доставка
  </button>
</h3>
<div id="panel-shipping">
  <p>Заказы, оформленные до 14:00, отправляются в тот же рабочий день.</p>
</div>

<h3>
  <button type="button" id="acc-returns" aria-expanded="false" aria-controls="panel-returns">
    Возврат
  </button>
</h3>
<div id="panel-returns" hidden>
  <p>Вернуть товар можно в течение 30 дней.</p>
</div>

<!-- Native alternative for independent sections -->
<details>
  <summary>Уход за изделием</summary>
  <p>Стирка в машине при 30 °C.</p>
</details>

Замечания по шаблону аккордеона из APG:

• Название каждого заголовка находится в элементе с ролью button, который обёрнут в заголовок соответствующего уровня, и кнопка — «единственный элемент внутри заголовка».
• aria-expanded равен true, когда панель видна, и false, когда скрыта; aria-controls ссылается на панель.
• Если панель открыта и аккордеон не позволяет её свернуть, у её кнопки стоит aria-disabled="true".
• У каждой панели может быть role="region" с aria-labelledby, указывающим на её кнопку. Это необязательно, и APG не советует так делать, когда одновременно может быть развёрнуто много панелей (около шести и больше), потому что создаётся слишком много ориентиров.
• Скрипт переключает aria-expanded и атрибут hidden. Поворачивайте шеврон средствами CSS по [aria-expanded="true"], чтобы визуальное состояние не могло разойтись с реальным.

details и summary дают кнопку, состояние и работу с клавиатуры без всякого скрипта. Они хорошо подходят для FAQ и инструкций по уходу; используйте вариант с ARIA, когда названия разделов должны быть ещё и заголовками в структуре страницы.

Работа с клавиатуры

Из шаблона аккордеона APG:

Частые ошибки в интернет-магазинах

• Заголовки из кликабельных div со значком-шевроном — нет кнопки, нет состояния, нет работы с клавиатуры.
• Заголовок внутри кнопки или кнопка, обёртывающая всю панель, что ломает структуру заголовков.
• aria-expanded, заданный один раз и больше не обновляемый.
• Закрытые панели, скрытые через max-height: 0, но ссылки в них по-прежнему получают фокус.
• Вопросы FAQ оформлены как заголовки, но размечены как p или span, либо заголовки с пропущенными уровнями.
• Кликабелен только маленький значок «+», а не название.
• Аккордеоны фильтров, перезагружающие страницу при открытии и теряющие фокус.

Что находит автоматика и что остаётся для ручной проверки

Все они — карточки в нашей библиотеке правил. Ручная проверка: откройте и закройте каждый раздел с Enter и пробелом, убедитесь, что экранный диктор объявляет «свёрнуто» и «развёрнуто», что закрытые панели не получают фокус и что значок состояния виден в обеих темах и при масштабе 200 %.

Запустите бесплатную проверку одной страницы. Это автоматическая проверка, а не полный аудит.

Частые вопросы

Как сделать доступный аккордеон?

Поместите название каждого раздела в заголовок, а внутри заголовка — кнопку с aria-expanded и aria-controls, которая показывает или скрывает панель. Это шаблон аккордеона из APG. Нативные элементы details и summary — более простая альтернатива для независимых разделов.

Какие клавиши нужны аккордеону?

Enter или пробел на кнопке заголовка открывает или закрывает её панель, а Tab и Shift + Tab перемещают по заголовкам и ссылкам в открытых панелях. Клавиши со стрелками не требуются.

Нужен ли каждой панели аккордеона role="region"?

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

Является ли содержимое закрытой панели проблемой для доступности?

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

Может ли автоматическая проверка проверить аккордеон?

Она находит кнопки заголовков или элементы summary без имени, пустые заголовки, недопустимые значения aria-expanded и aria-controls, указывающие на несуществующие ID. Меняется ли состояние и открывается ли панель с клавиатуры, проверяется вручную.

Источники

• W3C WAI, APG Accordion pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
• WHATWG, HTML Living Standard, interactive elements (details and summary): https://html.spec.whatwg.org/multipage/interactive-elements.html