Примерна 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">
        Section 1 Title
      </button>
    </h3>
    <div id="content-1" class="accordion-content" role="region" aria-labelledby="button-1">
      <p>Content for section 1 goes here.</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">
        Section 2 Title
      </button>
    </h3>
    <div id="content-2" class="accordion-content" role="region" aria-labelledby="button-2">
      <p>Content for section 2 goes here.</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` или `Spacebar` върху фокусиран хедър на акордеон трябва да превключва видимостта на неговия панел със съдържание.
• Клавиши със стрелки (по избор, но се препоръчва): За по-добро изживяване, обмислете внедряването на навигация с клавиши със стрелки:
  • `Стрелка надолу`: Премества фокуса към следващия хедър на акордеона.
  • `Стрелка нагоре`: Премества фокуса към предишния хедър на акордеона.
  • `Home`: Премества фокуса към първия хедър на акордеона.
  • `End`: Премества фокуса към последния хедър на акордеона.
  • `Стрелка надясно` (или `Enter`/`Space`): Разширява/свива текущия елемент на акордеона.
  • `Стрелка наляво` (или `Enter`/`Space`): Свива текущия елемент на акордеона и връща фокуса обратно към хедъра.

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

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

Примерен CSS за фокус:

.accordion-button:focus {
  outline: 3px solid blue; /* Or a color that meets contrast requirements */
  outline-offset: 2px;
}

5. Видимост и представяне на съдържанието

• Състояние по подразбиране: Решете дали секциите на акордеона трябва да бъдат свити или разширени по подразбиране. За ЧЗВ или гъста информация, започването със свито състояние често е най-доброто. За навигация или обобщения на функции, може да е полезно една секция да бъде разширена по подразбиране.
• Визуални подсказки: Използвайте ясни визуални подсказки, за да покажете дали дадена секция е разширена или свита. Това може да бъде икона (напр. знак '+' или '-', стрелка нагоре/надолу), която променя външния си вид. Уверете се, че тези икони също са достъпни (напр. чрез `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 все още трябва да предоставя някаква структура.
• Frameworks и библиотеки: Ако използвате JavaScript frameworks (React, Vue, Angular) или UI библиотеки, проверете тяхната документация за достъпност. Много от тях предоставят достъпни акордеон компоненти по подразбиране или със специфични атрибути.

Тестване за достъпност

Обстойното тестване е жизненоважно, за да се гарантира, че вашите акордеон уиджети са наистина достъпни.

• Автоматизирани инструменти: Използвайте браузърни разширения (като Axe, WAVE) или онлайн проверяващи, за да идентифицирате често срещани проблеми с достъпността.
• Тестване с клавиатура: Навигирайте и управлявайте акордеона, използвайки само клавиатурата (Tab, Shift+Tab, Enter, Spacebar, клавиши със стрелки). Уверете се, че всички интерактивни елементи са достъпни и операбилни.
• Тестване с екранен четец: Тествайте с популярни екранни четци (NVDA, JAWS, VoiceOver). Слушайте как се обявяват структурата и промените в състоянието на акордеона. Има ли смисъл? Правилно ли се предава състоянието `aria-expanded`?
• Потребителско тестване: Ако е възможно, включете потребители с увреждания в процеса на тестване. Тяхната обратна връзка е безценна за идентифициране на реални проблеми с използваемостта.
• Тестване на браузъри и устройства: Тествайте на различни браузъри и устройства, тъй като рендирането и поведението на JavaScript могат да варират.

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

Когато проектирате за глобална аудитория, вземете предвид следните фактори:

• Език: Уверете се, че целият текст, включително етикетите на бутоните и съдържанието, е ясен, кратък и лесно преводим. Избягвайте идиоми или културно специфични препратки.
• Дължина на съдържанието: Разширяването на съдържанието може значително да повлияе на оформлението на страницата. Имайте предвид, че преведеното съдържание може да бъде по-дълго или по-късо от оригинала. Тествайте как вашият акордеон се справя с различна дължина на съдържанието.
• Културни UI конвенции: Въпреки че основната функционалност на акордеоните е универсална, фините елементи на дизайна може да се възприемат по различен начин в различните култури. Придържайте се към установени модели и ясни визуални подсказки (affordances).
• Производителност: За потребители в региони с по-бавни интернет връзки, уверете се, че вашият 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, осигурявате стабилна клавиатурна навигация и провеждате обстойни тестове, можете да създадете акордеон компоненти, които са използваеми и приятни за всеки, по целия свят. Приоритизирането на достъпността от самото начало не само гарантира съответствие, но и води до по-приобщаващ и лесен за използване продукт за всички.

Помнете, достъпният дизайн не е последваща мисъл; той е неразделна част от добрия дизайн. Като овладеете внедряването на достъпни акордеон уиджети, вие допринасяте за по-справедлив и използваем уеб за всички потребители.