ARIA Authoring Practices Guide - accodion pattern

참조

https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/

Accordion Example

 

---

아코디언 패턴

아코디언

 - 각각이 섹션의 콘텐츠를 표현하는 title, content snippet, thumbnail 이 포함된 상호 작용 가능한 제목으로 구성된 수직으로 쌓인 집합

 

제목들은 사용자가 관련 콘텐츠 섹션을 나타내거나 숨길 수 있는 기능이 있다.

 

아코디언은 일반적으로 단일 페이지에서 여러 섹션의 콘텐츠를 제공할 때 스크롤이 필요한 상황을 줄이려고 사용된다.

 

아코디언 구성 요소

1. 아코디언 헤더
   콘텐츠 섹션을 나타낼때나 해당 섹션을 보여주거나 숨기도록 제어하는 레이블 혹은 썸네일
   
   
2. 아코디언 패널
   아코디언 헤더와 관련된 콘텐츠 섹션
   패널과 헤더는 연결되어 있다
3. 추가적인 요소
   일부 아코디언에서는 아코디언 헤더와 함께 표시되는 추가 요소들이 있따
   ex) 해당 섹션 적용되는 작업에 대한 접근을 제공하는 메뉴 버튼이나 숨겨진 콘텐츠의 일부 시각적 표현

 

속성

Role	Attribute	element	usage
		h3	아코디언 헤더로서 제공되는 요소 각 아코디언 헤더 요소는 콘텐츠 패널의 가시성을 제어하는 버튼을 포함한다. 레퍼런스 예제는 h3가 사용됐다.
	aria-expanded="true"	button	아코디언 패널이 펼쳐짐 여부에 따라 값을 설정
	aria-controls="ID"	button	헤더가 컨트롤하는 패널 ID를 가리킨다.
region		div	현재 펼쳐진 아코디언 패널을 포함하는 랜드마크 영역을 만든다.
	aria-labelledby="IDREF"	div	region 요소에 대한 접근 가능한 이름을 정의함 region을 펼치거나 숨기는 아코디언 헤더 버튼을 참조 region 요소는 랜드마크로서 식별되기 위한 접근 가능한 이름을 가져야 한다.

 

 

키보드 상호작용 유의사항

1. Enter or Space
   • 숨겨진 섹션의 아코디언 헤더가 포커스 일때 펼친다
   • 숨겨진 패널의 아코디언 헤더에 포커스가 있을 때, 해당 상호작용은 관련된 패널을 펼친다 만약, 이 동작이 오직 하나의 패널만 펼쳐지기를 허용하게 할거라면 다른 패널이 펼쳐져 있을 때 열려있는 패널은 숨긴다
   • 확장된 패널의 아코디언 헤더에 포커스가 있을 때, 구현이 축소를 지원하는 경우 패널을 축소시킵니다. 단, 일부 구현은 언제나 하나의 패널이 확장되어 있어야 하며 하나의 패널만 확장되도록 허용하기 때문에 축소 기능을 지원하지 않을 수 있습니다.
2. Tab
   • 다음 포커스 가능한 요소로 이동
   • 아코디언의 포커스 가능한 모든 요소들은 페이지 tab 시퀀스에 포함된다
3. Shift + Tab
   • Tab 과 반대로 동작
   • 페이지 내부의 이전 포커스 가능한 요소

optional

1. Down Arrow
   • 만약 아코디언 헤더에 포커스가 있다면, 다음 아코디언 헤더로 포커스를 움직이고 마지막 아코디언 헤더의 경우 동작이 없거나 첫번째 아코디언 헤더로 이동시킨다.
2. Up Arrow
   • down Arrow의 반대로 동작
3. Home
   • 아코디언 헤더에 포커스가 있을때, 첫번째 아코디언 헤더로 이동시킨다
4. End
   • 아코디언 헤더에 포커스가 잇을때, 마지막 아코디언 헤더로 이동시킨다.

 

WAI-ARIA Roles, States and Properties

<h3>
	<button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="sect1" 
	id="accordion1id">
		<span class="accordion-title">
		Personal Information
		<span class="accordion-icon"></span>
	</span>
	</button>
</h3>
<div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
...
</div>

• 각 아코디언 헤더의 제목은 role button을 가진 요소에 포함되어 있다
• 각 아코디언 헤더버튼은 role heading을 가진 요소로 둘러싸여 있고,
  해당 요소에는 페이지의 정보 아키텍처에 적절한 aria-level 값이 설정되어 있다
  • 만약 원시 호스트 언어에 암묵적 헤딩과 aria-level이 설정된 요소가 있는 경우 (ex. h3),
    해당 원시 호스트 언어 요소를 사용할 수 있다.
  • 버튼 요소는 헤딩 요소 내에서 유일한 요소이며, (role button, 버튼 요소만 직접 포함해야 한다)
    시각적으로 지속되는 다른 요소가 있으면 헤딩 요소 내에 포함시키지 않는다.
• 만약 아코디언 패널이 보이면, 헤더 버튼 요소의 aria-expanded는 true로 설정되고 보이지 않으면 false로 설정된다.
• 아코디언 헤더 버튼 요소는 aria-controls 를 아코디언 패널 콘텐츠를 포함하는 요소의 ID로 설정한다.
• 아코디언 헤더에 연결된 아코디언 패널이 보이는 상태에서, 이 패널을 축소할 수 없는 경우 헤더 버튼 요소의 aria-disabled 가 true로 설정된다.

<h3>
    <button type="button" aria-expanded="true" class="accordion-trigger" aria-controls="sect1" 
	id="accordion1id">
    <button/>
</h3>
<div id="sect1" role="region" aria-labelledby="accordion1id" class="accordion-panel">
  <div>
    <fieldset>
      <p>
        <label for="cufc1">Name<span aria-hidden="true">*</span>:</label>
        <input type="text" value="" name="Name" id="cufc1" class="required" aria-required="true" />
      </p>
      <p>
        <label for="cufc2">Email<span aria-hidden="true">*</span>:</label>
        <input type="text" value="" name="Email" id="cufc2" aria-required="true" />
      </p>
      <p>
        <label for="cufc3">Phone:</label>
        <input type="text" value="" name="Phone" id="cufc3" />
      </p>
      <p>
        <label for="cufc4">Extension:</label>
        <input type="text" value="" name="Ext" id="cufc4" />
      </p>
    </fieldset>
  </div>
</div>

• 선택적으로, 각 패널 콘텐츠를 위한 컨테이너로 사용되는 각 요소는 role region 및 aria-labelledby를 가질 수 있다.
  • 이때 aria-labelledby 값은 패널을 표시하는 버튼을 참조한다
    1. 랜드마크 region이 과도하게 생성되는 상황에서 role region 을 사용하는건 피해야함 ex) 동시에 확장할 수 있는 약 6개 이상의 패널을 포함하는 아코디언의 경우엔 피해야함
    2. role region 은 헤딩 요소나 중첩된 아코디언이 헤딩 요소를 포함할 때 스크린 리더 사용자에게 구조를 인지시키는데 도움된다.