Switch

[hsskey]

📋 컴포넌트 정보

• 컴포넌트 이름: Switch
• 컴포넌트 설명: Switch는 사용자가 on 또는 off 두 가지 값 중 하나를 선택할 수 있는 입력 위젯
• 사용 사례: 설정 켜기/끄기, 기능 활성화/비활성화 등 이진 선택이 필요한 경우 사용

📚 참조 및 레퍼런스

• ARIA Authoring Practices: W3C ARIA Switch Pattern
  • Switch 패턴의 설명, 예시, 키보드 인터랙션, 접근성 고려사항 등을 참고할 수 있음
• 기타 레퍼런스:
  • Building a switch component
    • Switch 컴포넌트 제작 과정을 자세히 설명한 글
  • MUI, Ant Design 등의 UI 라이브러리에서 Switch 컴포넌트 구현 방식을 참고할 수 있음

📝 접근성 및 ARIA 적용 여부

• ARIA Pattern 적용: W3C ARIA Switch Pattern
  • 사용된 ARIA 속성:
    • role="switch": 요소가 switch임을 나타냄
    • aria-checked="true|false": switch의 상태(on/off)를 나타냄
    • aria-labelledby, aria-label: switch의 레이블을 제공
    • aria-describedby: switch에 대한 추가 설명을 제공
• 접근성 관련 고려사항:
  • Switch의 상태 변화를 시각적으로 명확히 표시해야 함
  • Switch의 상태를 나타내는 텍스트(On/Off 등)는 스크린 리더에서 중복 읽히지 않도록 aria-hidden 속성 사용
  • Switch의 상태 변화 시 레이블이 변경되지 않아야 함
  • 키보드로 조작 가능해야 함
• 접근성 기능 요약:
  • role="switch"와 aria-checked를 사용하여 switch의 역할과 상태를 전달
  • 레이블과 설명을 제공하여 switch의 목적을 명확히 함
  • 키보드 조작을 지원하여 접근성을 높임

🏗️ 마크업 구조 분석

• HTML 시맨틱 태그 사용:
  • W3C 예제: <div role="switch">, <span>
  • MUI: <div class="MuiSwitch-root">, <input type="checkbox" role="switch">
  • Ant Design: <button type="button" role="switch">
• 마크업 구조 비교:
  • W3C:

    <div role="switch"
         aria-checked="false"
         tabindex="0">
      <span class="label">
        Notifications
      </span>
      <span class="switch">
        <span></span>
      </span>
      <span class="on" aria-hidden="true">
        On
      </span>
      <span class="off" aria-hidden="true">
        Off
      </span>
    </div>

  • MUI:

    <div class="MuiSwitch-root">
      <span class="MuiSwitch-track">
        <span class="MuiSwitch-thumb"></span>
      </span>
      <div class="MuiSwitch-action">
        <input type="checkbox" role="switch" class="MuiSwitch-input">
      </div>
    </div>

  • Ant Design:

    <button type="button" role="switch" aria-checked="true" class="ant-switch ant-switch-checked">
      <div class="ant-switch-handle"></div>
      <span class="ant-switch-inner">
        <span class="ant-switch-inner-checked"></span>
        <span class="ant-switch-inner-unchecked"></span>
      </span>
    </button>

• 구조적 선택 이유:
  • W3C: switch의 역할과 상태를 명시적으로 표현하기 위해 role과 aria-* 속성 사용
  • MUI: <input type="checkbox" role="switch">를 기반으로 스타일링 및 기능 추가
  • Ant Design: <button>을 기반으로 스타일링 및 기능 추가하고 role과 aria-* 속성으로 접근성 보장

💡 UI 라이브러리 비교 분석

• MUI:
  • <div>와 <input type="checkbox" role="switch">를 사용하여 구현
  • CSS 클래스를 사용하여 스타일링
  • 상태에 따른 스타일 변경은 클래스 추가/제거로 처리
• Ant Design:
  • <button>을 사용하여 구현
  • role과 aria-* 속성을 사용하여 접근성 보장
  • 상태에 따른 스타일 변경은 클래스 추가/제거로 처리

⚙️ 구현 및 설계 고려사항

• 주요 설계 고려사항:
  • 접근성: 키보드 조작 가능, 적절한 레이블 및 설명 제공, 상태 변화 명확히 전달
  • 상태 관리: on/off 상태를 관리하고 변경할 수 있어야 함
  • 스타일링: 상태에 따른 시각적 변화를 명확히 표현
• 코드 예시:

  <label class="switch">
    <input type="checkbox" role="switch" aria-checked="false">
    <span class="slider"></span>
    <span class="label">Switch Label</span>
  </label>

🔍 테스트 및 검토

• 접근성 테스트:
  • 키보드로 조작 가능한지 확인
  • 스크린 리더에서 적절히 읽히는지 확인
• 브라우저 호환성 테스트: 주요 브라우저에서 일관된 동작과 스타일링 되는지 확인
• 사용자 피드백: 사용성 테스트를 통해 피드백을 수렴하고 개선 사항 반영

📌 추가 참고 사항

• 관련 문서:
  • W3C - ARIA Switch
• 의견 및 제안:
  • 라벨 위치 등 디자인 적인 요소는 프로젝트의 특성에 맞게 조정 필요
  • 상태 변경 시 애니메이션 효과를 추가하여 사용자 경험 개선 가능

🎯 역할, 속성, 상태 및 태그 속성

• Role, Attribute, State
  • Role: switch
  • Attribute:
    • aria-checked: switch의 상태(on/off)를 나타냄
    • aria-labelledby, aria-label: switch의 레이블을 제공
    • aria-describedby: switch에 대한 추가 설명을 제공
  • State: checked: switch의 상태(on/off)를 나타냄
• JavaScript 및 CSS 사용 여부
  • JavaScript 사용 여부:
    • 상태 변경 이벤트 처리
    • 키보드 이벤트 처리
    • 접근성 속성 동적 변경
  • CSS 적용 사항:
    • 상태에 따른 스타일 변경
    • 트랙과 썸의 모양 및 위치 조정
    • 애니메이션 효과 적용