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`에 대한 참고: CSS에서 `display: none;`을 사용하면 요소가 접근성 트리에서 효과적으로 제거됩니다. `display: none;` 없이 JavaScript를 사용하여 동적으로 콘텐츠를 표시/숨김 처리하는 경우 `aria-hidden`이 더 중요해집니다. 그러나 일반적으로 콘텐츠 패널을 숨기는 데는 `display: none;`이 선호되는 방법입니다.

3. 키보드 조작성

사용자가 표준 키보드 명령을 사용하여 아코디언과 상호작용할 수 있도록 보장하십시오.

• 탭 탐색: 아코디언 헤더는 포커스를 받을 수 있어야 하며 페이지의 자연스러운 탭 순서에 나타나야 합니다.
• 활성화: 포커스된 아코디언 헤더에서 `Enter` 또는 `Spacebar`를 누르면 해당 콘텐츠 패널의 가시성이 토글되어야 합니다.
• 화살표 키 (선택 사항이지만 권장): 더 향상된 경험을 위해 화살표 키 탐색 구현을 고려하십시오:
  • `아래 화살표`: 다음 아코디언 헤더로 포커스를 이동합니다.
  • `위 화살표`: 이전 아코디언 헤더로 포커스를 이동합니다.
  • `Home`: 첫 번째 아코디언 헤더로 포커스를 이동합니다.
  • `End`: 마지막 아코디언 헤더로 포커스를 이동합니다.
  • `오른쪽 화살표` (또는 `Enter`/`Space`): 현재 아코디언 항목을 확장/축소합니다.
  • `왼쪽 화살표` (또는 `Enter`/`Space`): 현재 아코디언 항목을 축소하고 포커스를 헤더로 다시 이동합니다.

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, Spacebar, 화살표 키)을 사용하여 아코디언을 탐색하고 조작하십시오. 모든 상호작용 요소에 도달하고 조작할 수 있는지 확인하십시오.
• 스크린 리더 테스트: 인기 있는 스크린 리더(NVDA, JAWS, VoiceOver)로 테스트하십시오. 아코디언의 구조와 상태 변경이 어떻게 안내되는지 들어보십시오. 말이 됩니까? `aria-expanded` 상태가 올바르게 전달됩니까?
• 사용자 테스트: 가능하다면, 테스트 과정에 장애가 있는 사용자를 참여시키십시오. 그들의 피드백은 실제 사용성 문제를 식별하는 데 매우 중요합니다.
• 브라우저 및 기기 테스트: 렌더링 및 JavaScript 동작이 다를 수 있으므로 다양한 브라우저와 기기에서 테스트하십시오.

글로벌 관점 및 현지화

글로벌 사용자를 대상으로 설계할 때 다음 요소를 고려하십시오:

• 언어: 버튼 레이블과 콘텐츠를 포함한 모든 텍스트가 명확하고 간결하며 쉽게 번역될 수 있도록 하십시오. 관용구나 문화적으로 특정한 참조는 피하십시오.
• 콘텐츠 길이: 콘텐츠 확장은 페이지 레이아웃에 상당한 영향을 미칠 수 있습니다. 번역된 콘텐츠가 원본보다 길거나 짧을 수 있음을 유의하십시오. 아코디언이 다양한 콘텐츠 길이를 어떻게 처리하는지 테스트하십시오.
• 문화적 UI 관례: 아코디언의 핵심 기능은 보편적이지만, 미묘한 디자인 요소는 문화에 따라 다르게 인식될 수 있습니다. 확립된 패턴과 명확한 어포던스를 따르십시오.
• 성능: 인터넷 연결이 느린 지역의 사용자를 위해 JavaScript가 최적화되었는지, 그리고 아코디언 내의 콘텐츠가 초기 페이지 로드 시간에 과도한 영향을 미치지 않는지 확인하십시오.

접근성 있는 아코디언 예시

많은 평판 좋은 기관들이 접근성 있는 아코디언 패턴을 보여줍니다:

• GOV.UK 디자인 시스템: 접근성에 대한 헌신으로 자주 인용되는 GOV.UK는 아코디언을 포함하여 WCAG를 준수하는 잘 문서화된 구성 요소를 제공합니다.
• MDN 웹 문서: 모질라 개발자 네트워크는 ARIA 사용에 대한 명확한 설명과 함께 아코디언을 포함한 접근성 있는 위젯 제작에 대한 자세한 가이드와 예제를 제공합니다.
• 대형 기술 회사의 디자인 시스템: 구글(머티리얼 디자인), 마이크로소프트(플루언트 UI), 애플과 같은 회사들은 종종 접근성을 우선시하는 디자인 시스템 구성 요소를 제공합니다. 이를 참조하면 견고한 구현 패턴을 얻을 수 있습니다.

결론

아코디언 위젯은 콘텐츠를 구성하고 사용자 경험을 향상시키는 강력한 도구입니다. 그러나 그 동적인 특성은 접근성에 대한 신중한 접근을 요구합니다. WCAG 가이드라인을 준수하고, 시맨틱 HTML을 활용하며, ARIA를 올바르게 구현하고, 견고한 키보드 탐색을 보장하며, 철저한 테스트를 수행함으로써 전 세계 모든 사람이 사용하고 즐길 수 있는 아코디언 구성 요소를 만들 수 있습니다. 처음부터 접근성을 우선시하는 것은 규정 준수를 보장할 뿐만 아니라 모든 사람을 위한 더 포용적이고 사용자 친화적인 제품으로 이어집니다.

기억하십시오, 접근성 있는 디자인은 나중에 생각할 문제가 아니라 좋은 디자인의 필수적인 부분입니다. 접근성 있는 아코디언 위젯 구현을 마스터함으로써 모든 사용자를 위한 더 공평하고 사용 가능한 웹에 기여하게 됩니다.