Приклад структури HTML:

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-1" id="button-1">
        Заголовок секції 1
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Контент для секції 1 тут.</p>
    </div>
  </div>
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button class="accordion-button" aria-expanded="false" aria-controls="content-2" id="button-2">
        Заголовок секції 2
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Контент для секції 2 тут.</p>
    </div>
  </div>
</div>

2. Атрибути ARIA для динамічного контенту

Ролі та стани ARIA є вирішальними для інформування допоміжних технологій про поведінку акордеона.

• `role="button"`: На інтерактивному елементі (кнопці), що перемикає контент.
• `aria-expanded`: Встановлюється в `true`, коли панель контенту видима, і в `false`, коли вона прихована. Це безпосередньо повідомляє стан скрінрідерам.
• `aria-controls`: На кнопці, посилаючись на `id` панелі контенту, якою вона керує. Це встановлює програмний зв'язок.
• `aria-labelledby`: На панелі контенту, посилаючись на `id` кнопки, яка нею керує. Це створює двонаправлений зв'язок.
• `role="region"`: На панелі контенту. Це вказує на те, що контент є сприйнятливою секцією сторінки.
• `aria-hidden`: Хоча `aria-expanded` є кращим для керування станами видимості, `aria-hidden="true"` можна використовувати на панелях контенту, які наразі не відображаються, щоб запобігти їх оголошенню скрінрідерами. Однак більш надійним є забезпечення того, щоб контент був належним чином прихований за допомогою CSS (`display: none;`) або видалений з дерева доступності.

Примітка щодо `aria-hidden` та `display: none`: Використання `display: none;` в CSS ефективно видаляє елемент з дерева доступності. Якщо ви динамічно показуєте/приховуєте контент за допомогою JavaScript без `display: none;`, `aria-hidden` стає більш важливим. Проте, `display: none;` зазвичай є кращим методом для приховування панелей контенту.

3. Керованість з клавіатури

Переконайтеся, що користувачі можуть взаємодіяти з акордеоном за допомогою стандартних клавіатурних команд.

• Навігація за допомогою Tab: Заголовки акордеона повинні бути фокусованими та з'являтися у природному порядку табуляції сторінки.
• Активація: Натискання `Enter` або `Пробілу` на сфокусованому заголовку акордеона повинно перемикати видимість його панелі контенту.
• Клавіші зі стрілками (необов'язково, але рекомендується): Для покращеного досвіду розгляньте можливість реалізації навігації за допомогою клавіш зі стрілками:
  • `Стрілка вниз`: Перемістити фокус на наступний заголовок акордеона.
  • `Стрілка вгору`: Перемістити фокус на попередній заголовок акордеона.
  • `Home`: Перемістити фокус на перший заголовок акордеона.
  • `End`: Перемістити фокус на останній заголовок акордеона.
  • `Стрілка вправо` (або `Enter`/`Пробіл`): Розгорнути/згорнути поточний елемент акордеона.
  • `Стрілка вліво` (або `Enter`/`Пробіл`): Згорнути поточний елемент акордеона та перемістити фокус назад на заголовок.

4. Візуальні індикатори фокуса

Коли заголовок акордеона отримує фокус з клавіатури, він повинен мати чіткий візуальний індикатор. Стандартних контурів фокуса браузера часто достатньо, але переконайтеся, що вони не видалені за допомогою CSS (наприклад, `outline: none;`) без надання альтернативного, добре видимого стилю фокуса.

Приклад CSS для фокуса:

.accordion-button:focus {
  outline: 3px solid blue; /* Або колір, що відповідає вимогам контрастності */
  outline-offset: 2px;
}

5. Видимість та представлення контенту

• Стан за замовчуванням: Вирішіть, чи повинні секції акордеона бути згорнутими чи розгорнутими за замовчуванням. Для FAQ або щільної інформації краще починати зі згорнутого стану. Для навігації або огляду функцій може бути корисним мати одну секцію розгорнутою за замовчуванням.
• Візуальні підказки: Використовуйте чіткі візуальні підказки, щоб вказати, чи є секція розгорнутою чи згорнутою. Це може бути іконка (наприклад, знак '+' або '-', стрілка вгору/вниз), яка змінює свій вигляд. Переконайтеся, що ці іконки також доступні (наприклад, за допомогою `aria-label`, якщо вони не мають тексту).
• Коефіцієнти контрастності: Переконайтеся, що текстовий контент в акордеоні та кнопки перемикання відповідають вимогам коефіцієнта контрастності WCAG (4.5:1 для звичайного тексту, 3:1 для великого тексту). Це життєво важливо для користувачів зі слабким зором.
• Без втрати контенту: Коли секція розгортається, переконайтеся, що її контент не виходить за межі контейнера та не закриває інший критичний контент.

6. Керування фокусом при перемиканні

Це більш просунутий аспект, але вирішальний для безперебійного досвіду.

• Розгортання: Коли користувач розгортає секцію, розгляньте можливість переміщення фокуса на перший інтерактивний елемент у новоствореному контенті. Це особливо важливо, якщо розгорнутий контент містить поля форми або посилання.
• Згортання: Коли користувач згортає секцію, фокус повинен повернутися до заголовка акордеона, який був перемкнений. Це запобігає необхідності користувачам повертатися назад через раніше згорнуті секції.

Реалізація керування фокусом зазвичай вимагає використання JavaScript для захоплення та програмного встановлення фокуса.

Реалізація доступних акордеонів за допомогою JavaScript

Хоча семантичний HTML та ARIA є першими кроками, JavaScript часто потрібен для обробки динамічного перемикання та потенційного керування фокусом. Ось концептуальний підхід на JavaScript:

// Концептуальний JavaScript для функціональності акордеона

document.querySelectorAll('.accordion-button').forEach(button => {
  button.addEventListener('click', () => {
    const controlsId = button.getAttribute('aria-controls');
    const content = document.getElementById(controlsId);

    if (content) {
      const isExpanded = button.getAttribute('aria-expanded') === 'true';
      
      // Перемикання стану aria-expanded
      button.setAttribute('aria-expanded', !isExpanded);

      // Перемикання видимості контенту (використовуючи CSS для доступності)
      content.style.display = isExpanded ? 'none' : 'block'; // Або використовуйте перемикання класів

      // Необов'язково: керування фокусом при розгортанні
      // if (!isExpanded) {
      //   const firstFocusableElement = content.querySelector('a[href], button, input, [tabindex]');
      //   if (firstFocusableElement) {
      //     firstFocusableElement.focus();
      //   }
      // }
    }
  });

  // Необов'язково: тут також можна реалізувати навігацію з клавіатури (клавіші зі стрілками тощо).
  // Наприклад, обробка подій 'keydown'.
});

// Початкове налаштування: приховати контент за замовчуванням і встановити aria-expanded на false
document.querySelectorAll('.accordion-content').forEach(content => {
  const headerButton = document.getElementById(content.getAttribute('aria-labelledby'));
  if (headerButton) {
    content.style.display = 'none'; // Спочатку приховати контент
    headerButton.setAttribute('aria-expanded', 'false');
  }
});

Важливі міркування щодо JavaScript:

• CSS для приховування: Найкращою практикою є використання CSS (наприклад, `display: none;` або класу, який встановлює `height: 0; overflow: hidden;` для плавніших переходів) для приховування контенту. Це гарантує, що контент буде видалений з дерева доступності, коли він невидимий.
• Плавна деградація: Переконайтеся, що навіть якщо JavaScript не завантажиться або не виконається, контент акордеона залишиться доступним (хоча, можливо, не розгортаним). Семантичний HTML все одно повинен забезпечувати певну структуру.
• Фреймворки та бібліотеки: Якщо ви використовуєте фреймворки JavaScript (React, Vue, Angular) або бібліотеки UI, перевірте їхню документацію з доступності. Багато з них надають доступні компоненти акордеонів "з коробки" або з певними атрибутами.

Тестування на доступність

Ретельне тестування є життєво важливим для того, щоб переконатися, що ваші віджети-акордеони дійсно доступні.

• Автоматизовані інструменти: Використовуйте розширення для браузерів (наприклад, Axe, WAVE) або онлайн-перевірки для виявлення поширених проблем з доступністю.
• Тестування з клавіатури: Переміщуйтесь та керуйте акордеоном, використовуючи лише клавіатуру (Tab, Shift+Tab, Enter, Пробіл, клавіші зі стрілками). Переконайтеся, що всі інтерактивні елементи доступні та керовані.
• Тестування за допомогою скрінрідера: Протестуйте з популярними скрінрідерами (NVDA, JAWS, VoiceOver). Прослухайте, як оголошуються структура та зміни стану акордеона. Чи має це сенс? Чи правильно передається стан `aria-expanded`?
• Тестування користувачами: Якщо можливо, залучіть до процесу тестування користувачів з обмеженими можливостями. Їхній відгук є безцінним для виявлення реальних проблем юзабіліті.
• Тестування в браузерах та на пристроях: Тестуйте в різних браузерах та на різних пристроях, оскільки рендеринг та поведінка JavaScript можуть відрізнятися.

Глобальні перспективи та локалізація

При проектуванні для глобальної аудиторії враховуйте ці фактори:

• Мова: Переконайтеся, що весь текст, включаючи мітки кнопок та контент, є чітким, лаконічним та легко перекладається. Уникайте ідіом або культурно-специфічних посилань.
• Довжина контенту: Розгортання контенту може значно вплинути на макет сторінки. Пам'ятайте, що перекладений контент може бути довшим або коротшим за оригінал. Протестуйте, як ваш акордеон обробляє різну довжину контенту.
• Культурні конвенції UI: Хоча основна функціональність акордеонів є універсальною, тонкі елементи дизайну можуть сприйматися по-різному в різних культурах. Дотримуйтесь усталених патернів та чітких афордансів.
• Продуктивність: Для користувачів у регіонах з повільнішим інтернет-з'єднанням переконайтеся, що ваш JavaScript оптимізовано, і що контент в акордеонах не надто впливає на початковий час завантаження сторінки.

Приклади доступних акордеонів

Багато авторитетних організацій демонструють доступні патерни акордеонів:

• GOV.UK Design System: Часто цитується за свою прихильність до доступності, GOV.UK надає добре задокументовані компоненти, включаючи акордеони, що відповідають WCAG.
• MDN Web Docs: Mozilla Developer Network пропонує детальні посібники та приклади створення доступних віджетів, включаючи акордеони, з чіткими поясненнями використання ARIA.
• Системи дизайну від великих технологічних компаній: Компанії, такі як Google (Material Design), Microsoft (Fluent UI) та Apple, надають компоненти систем дизайну, які часто пріоритезують доступність. Звернення до них може запропонувати надійні патерни реалізації.

Висновок

Віджети-акордеони є потужними інструментами для організації контенту та покращення користувацького досвіду. Однак їхня динамічна природа вимагає свідомого підходу до доступності. Дотримуючись рекомендацій WCAG, використовуючи семантичний HTML, правильно впроваджуючи ARIA, забезпечуючи надійну навігацію з клавіатури та проводячи ретельне тестування, ви можете створювати компоненти-акордеони, які є зручними та приємними для всіх у всьому світі. Пріоритезація доступності з самого початку не лише забезпечує відповідність стандартам, але й веде до створення більш інклюзивного та зручного продукту для всіх.

Пам'ятайте, доступний дизайн — це не доповнення, а невід'ємна частина хорошого дизайну. Опановуючи реалізацію доступних віджетів-акордеонів, ви робите внесок у створення більш справедливого та зручного вебу для всіх користувачів.