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

Акордеони роблять довгі сторінки керованими: 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 і Space, перевірте, що програма зчитування з екрана оголошує «згорнуто» й «розгорнуто», що закриті панелі не можуть отримати фокус і що іконка стану видима в обох темах та за масштабу 200 %.

Запустіть безкоштовну перевірку однієї сторінки. Це автоматична перевірка, а не повний аудит.

Часті запитання

Як створити доступний акордеон?

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

Які клавіші потрібні акордеону?

Enter або Space на кнопці заголовка відкриває чи закриває її панель, а 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