아코디언은 화면 내에서 사용자 컨트롤을 통해 콘텐츠 섹션을 표시하거나 숨길 수 있는 구성요소입니다. 긴 텍스트 블록 형태의 목록으로 구성되며 각 블록의 가시성을 전환하는 헤더 버튼을 제공합니다.
Usage
아코디언은 다음의 경우에 사용합니다.
•
정보의 양이 많아 일부 내용을 숨김 상태로 제공하는 경우
•
단계나 상태에 따른 순차적인 노출이 필요한 경우
•
연관된 정보를 그룹화 하는 경우
•
페이지나 스크롤 길이를 줄이기 위한 경우
Anatomy
헤더와 패널로 구성되어 있고 헤더에 위치한 버튼을 클릭하여 내용 영역을 펼치거나 접을 수 있습니다.
1.
Header
타이틀과 컨트롤 요소를 포함하는 텍스트 블록 형태의 영역입니다.
2.
Control
패널을 펼치고 접는 토글 스위치 기능의 버튼입니다. 아이콘 버튼으로 사용 가능합니다.
3.
Panel
헤더와 연결된 콘텐츠 영역입니다.
4.
Section
하나의 섹션은 헤더와 패널로 구성됩니다.
Expansion
한 화면 내에서 여러 단계에 걸쳐 작업을 진행해야 할 때 사용합니다.
한 단계는 하나의 섹션으로 구성되며 각 섹션은 여러 개의 state 화면으로 구성할 수 있습니다.
확장형 아코디언은 입력 폼이나 버튼 등 사용자의 과업 진행을 위한 다양한 컨트롤 구성요소를 포함합니다.
1.
현재 열린 상태의 섹션 및 포커스된 state 화면입니다.
2.
이전 state 화면으로 이동하는 컨트롤 버튼입니다.
3.
다음 state 화면으로 이동하는 컨트롤 버튼입니다.
Style guide
Guidelines
다음 지침에 따라 사용합니다.
•
일반 아코디언은 모든 콘텐츠 패널이 닫힌 상태를 디폴트 상태로 합니다. 모두 접힌 상태에서 제공하여 사용자에게 제공 정보의 개요를 전달합니다.
•
여러 섹션이 동시에 펼침 상태를 유지할 수 있도록 하는 것을 원칙으로 하지만, 확장형 아코디언은 하나의 섹션만 펼침 상태가 될습수니 있습이다.
•
헤더와 패널이 하나의 섹션이라는 것을 시각적으로 분명히 인지할 수 있도록 디자인합니다.
Accessibility
다음의 접근성 지침을 고려하여 아코디언을 사용합니다.
•
아코디언 영역의 펼침-접힘 상태는 aria-controls 및 aria-expanded를 사용합니다.
•
