Пример структуры 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: Часто цитируемая за свою приверженность доступности, GOV.UK предоставляет хорошо документированные компоненты, включая аккордеоны, которые соответствуют WCAG.
• MDN Web Docs: Mozilla Developer Network предлагает подробные руководства и примеры по созданию доступных виджетов, включая аккордеоны, с чёткими объяснениями использования ARIA.
• Системы дизайна от крупных технологических компаний: Компании, такие как Google (Material Design), Microsoft (Fluent UI) и Apple, предоставляют компоненты систем дизайна, которые часто ставят доступность в приоритет. Обращение к ним может предложить надёжные паттерны реализации.

Заключение

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

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