펼침 영역과 탭: 올바른 것 선택하기

탭과 아코디언은 모두 콘텐츠를 숨기고 표시하므로 서로 혼동하기 쉽습니다. 잘못된 패턴을 선택하면 사용자가 방향을 잃을 수 있습니다.

탭 묶음은 서로 배타적인 보기를 제공합니다. 하나의 패널을 열면 다른 패널은 닫힙니다. 사용자가 한 번에 한 부분씩 비교하는 콘텐츠에 적합합니다.

아코디언에서는 여러 섹션을 동시에 열어 둘 수 있습니다. 사용자가 두 답변을 나란히 보고 싶어 할 수 있는 긴 FAQ 페이지에 적합합니다.

하나의 표시/숨기기 요소는 disclosure입니다. 버튼 하나와 영역 하나로 구성되며, 선택적으로 표시할 세부 정보가 한 덩어리일 때 사용하십시오.

각 패턴은 서로 다른 ARIA를 사용합니다. 탭에는 tablist와 화살표 키가 필요하지만, disclosure나 아코디언에는 aria-expanded가 있는 버튼만 필요합니다.

탭은 각 레이블이 짧고 행이 화면 위쪽에 한 줄로 들어갈 때 가장 잘 작동합니다. 레이블이 길다면 세로로 쌓이는 아코디언이 더 읽기 좋습니다.

화면이 좁으면 가로 탭 행이 자주 넘칩니다. 아코디언은 자연스럽게 세로로 쌓이므로 많은 팀이 작은 화면에서는 패턴을 전환합니다.

섹션이 독립적인지 생각해 보십시오. 여러 섹션을 함께 읽는 것이 유용하다면 아코디언을, 하나의 보기만 있으면 된다면 탭을 선택하십시오.

스크롤하는 일반 링크만으로 어느 패턴이든 만들지 마십시오. 링크는 다른 곳으로 이동시키지만, 이 컨트롤은 콘텐츠 상태를 전환하므로 버튼 의미가 필요합니다.

어떤 패턴을 선택할지 애매하다면 더 단순한 방식을 선호하십시오. disclosure나 아코디언은 완전한 탭 위젯보다 잘못 설정할 ARIA가 적습니다.

올바른 선택은 겉모양이 아니라 콘텐츠에서 나옵니다. 사용자가 콘텐츠를 어떻게 읽고 비교해야 하는지 결정한 다음, 그에 맞는 패턴을 선택하십시오.

콘텐츠의 요구 사항에 따라 선택하는 방법을 배웠습니다. 한 번에 하나씩 보는 보기에는 탭을, 여러 섹션을 열어 두는 경우에는 아코디언을, 하나만 표시하는 경우에는 disclosure를 사용합니다.