사용하기 적합한 경우

수평 탭

탭이 좌에서 우의 순서로 제공되며 탭과 탭 패널이 상/하로 배치된다.

수직 탭

탭이 상에서 하의 순서로 제공되며 탭과 탭 패널이 좌/우로 배치된다

1. 1. 탭: 사용자와의 상호작용에 반응하는 박스 영역으로 실행 시 각 탭에 상응하는 콘텐츠가 탭 패널에 표시됨
2. 2. 탭 레이블: 표시할 탭 패널의 제목
3. 3. 인디케이터: 탭이 선택된 상태임을 알려주는 시각적인 식별자
4. 4. 탭 패널: 콘텐츠가 표시되는 영역
5. 5. 탭 탐색 버튼(선택): 시각적으로 표시되지 않는 나머지 탭을 탐색하기 위한 버튼

• 사용자가 탭과 탭 패널 간 관계를 명확하게 인지할 수 있도록 표현한다.

  탭과 탭 패널을 인접한 영역에 배치하여 탭 패널이 선택된 탭에 관련된 콘텐츠임을 인지할 수 있도록 해야 한다. 탭과 탭 패널의 배경색을 동일하게 지정하면 두 요소 간 관련성을 시각적으로 보다 강조할 수 있다.

  [모범 사례 1]

  

  [모범 사례 2]

  
• 탭 레이블은 표시할 콘텐츠 섹션의 정보를 예측할 수 있는 명확한 내용으로 제공한다.

  탭은 선택된 탭을 제외한 나머지 탭의 콘텐츠를 숨기기 때문에 레이블이 명확하지 않으면 사용자 탭을 클릭해야 하는지 알 수 없어 필요한 정보가 포함된 탭을 놓칠 수 있다.

• 탭에 사용 불가 상태를 사용하지 않는다.

  탭에 표시될 콘텐츠가 없는 경우, 해당 탭을 삭제하거나 탭을 선택했을 때 패널에 콘텐츠가 없는 이유에 대한 설명을 제공하여 사용자가 혼동을 느끼지 않도록 해야 한다.

  [피해야 할 사례]

  
• 여러 개의 탭을 중첩하는 경우, 서로 다른 수준의 탭이 명확하게 구분되도록 표현한다.

  탭은 콘텐츠를 숨겨둔 상태에서 사용자가 콘텐츠의 표시 여부를 선택해야 하기 때문에 사용자의 인지적 부담을 더욱 증가시킬 수 있어 여러 개의 탭을 중첩하는 것은 바람직하지 않다. 그러나 불가피하게 탭을 중첩해야 하는 경우 중첩된 탭의 스타일이 시각적으로 분명하게 구분되어야 한다.

  [모범 사례]

  

  [피해야 할 사례]

  
• 수직 탭은 탭을 수평으로 배치하기 어려운 경우에 사용한다.

  많은 수의 탭을 별도의 탐색 컨트롤을 사용하지 않고 한 번에 확인하는 것이 중요한 경우 수직 탭을 사용할 수 있다. 또한 수직 탭은 수평 탭의 높이만큼 공간을 절약할 수 있으므로, 콘텐츠 섹션의 높이가 고정적이고 탭 영역의 높이에 제한이 있는 경우에 사용하기 적합하다. 그러나 탭이 탭 패널의 상단에 배치되어 있는 것이 사용자에게 더 익숙하므로 수직 탭을 사용할 때에는 탭과 탭 패널 간 관계를 표현하는 데 더 주의를 기울여야 한다.

• 탭의 항목 수가 많아 일렬로 배치하기 어려운 경우 별도의 탐색 컨트롤을 제공한다.

  탭이 6개를 초과하면 사용자의 인지적인 부담을 증가시키고 레이아웃에 문제가 발생할 수 있다. 모든 탭이 영역의 너비에서 넘치지 않고 표시될 수 없는 경우, 숨겨진 탭을 탐색할 수 있는 팝업 버튼을 제공하거나 탭을 좌/우로 이동할 수 있는 컨트롤 요소를 제공해야 한다.

  [모범 사례]

  

  [피해야 할 사례]

  

• 탭의 선택 상태를 색상으로만 구분하지 않는다.

  탭의 선택 상태를 색상 이외의 수단으로 구분할 수 있는 시각적 단서를 제공해야 한다. 밑줄 제공, 1px 이상의 테두리 차이, 식별자 제공 등의 방법으로 크기나 형태 차원에서 정보를 구분하는 방법을 사용할 수 있다.

  • KWCAG 2.2 색에 무관한 콘텐츠 인식
  • WCAG 2.1 Use of Color (A)

  [모범 사례]

  

  [피해야 할 사례]

  
• 탭을 키보드로 탐색하고 실행할 수 있도록 한다.

  탭은 키보드로 접근하여 조작할 수 있어야 한다.

  • KWCAG 2.2 키보드 사용 보장
  • WCAG 2.1 Keyboard (A)
  • WCAG 2.1 No Keyboard Trap (A)
• 탭의 키보드 초점이 명확하게 표시되도록 한다.

  모든 탭은 초점을 받은 상태가 시각적으로 명확하게 구분되어야 한다.

  • KWCAG 2.2 초점 이동
  • WCAG 2.1 Focus Visible (AA)
  • WCAG 2.1 Non-text Contrast (AA)
• 탭의 선택 상태를 스크린 리더로 확인할 수 있도록 한다.

  탭 레이블과 탭의 선택 상태를 텍스트로 제공하여 스크린 리더에서 정보를 인지할 수 있도록 해야 한다. 탭 버튼에 role=”tab”로 역할을 부여하고 선택된 탭에 aria-selected=”true”로 상태 정보를 전달하거나 title=”현재 탭”, title=”선택됨”으로 선택 상태에 대한 정보를 제공할 수 있다.

  • KWCAG 2.2 적절한 대체 텍스트 제공
  • WCAG 2.1 Name, Role, Value (A)
• 탭과 패널의 역할 및 관계를 스크린 리더로 확인할 수 있도록 한다.

  탭 버튼 목록 영역은 role=”tablist”, 탭 버튼은 role=”tab”, 탭 패널은 role=”tabpanel”로 역할을 부여한다. 그런 다음 탭 버튼과 탭 패널에 각각 id 속성과 속성값을 부여한 다음, 탭 버튼에는 ariacontrols="[상응하는 탭 패널 id 속성값]”, aria-labelledby="[상응하는 탭 버튼 id 속성값]”을 설정하여 탭과 패널 간 연결 관계를 프로그램적으로 전달할 수 있다.

  • KWCAG 2.2 콘텐츠의 선형화
  • WCAG 2.1 Info and Relationships (A)
  • WCAG 2.1 Name, Role, Value (A)

탭 탐색

탭 패널 전환