accordion

Web Accessibility

Accordion

Role & Attribute

• role="region"
• aria-expanded
• aria-controls
• aria-labelledby

view

html

<div class="c-accordion">
  <div class="c-accordion__item">
    <div class="c-accordion__head">
      <h3 class="c-accordion__title"> <!-- [D] 헤딩 레벨은 상황에 맞게 변경 -->
        <button type="button" class="c-accordion__button" id="★accordion-anchor-1" aria-controls="★accordion-panel-1" aria-expanded="★false">
          버튼
        </button>
      </h3>
    </div>
    <div class="c-accordion__panel" role="region" id="★accordion-panel-1"  aria-labelledby="★accordion-anchor-1">
      <div class="c-accordion__inside">
        내용
      </div>
    </div>
  </div>
  <div class="c-accordion__item">
    <div class="c-accordion__head">
      <h3 class="c-accordion__title">
        <button type="button" class="c-accordion__button" id="★accordion-anchor-2" aria-controls="★accordion-panel-2" aria-expanded="★true">
          버튼
        </button>
      </h3>
    </div>
    <div class="c-accordion__panel" role="region" id="★accordion-panel-2"  aria-labelledby="★accordion-anchor-2">
      <div class="c-accordion__inside">
        내용
      </div>
    </div>
  </div>
</div>

Issue

• VoiceOver
  • heading 내에 button 태그가 아니라 a 태그인 경우에는 aria-expanded 속성이 적용되지 않음
  • a태그인 경우 role=”button” 으로 처리 가능
  • heading 태그 대신에 role=”heading” 가능
• NVDA
  • 문제 없음 확인

Keyboard Interaction

• Space or Enter : 패널이 활성화 또는 비활성화 되어야함

script

• button : c-accordion__button
  • aria-expanded : 활성화 true, 비활성화 false