접근성

이름, 키보드, 초점, 상태 안내를 사용 환경에서 확인합니다.

Names and labels

텍스트 입력에는 label을 연결합니다. 아이콘만 있는 버튼은 aria-label이 필요합니다. 장식 아이콘은 접근성 트리에서 제외하고, 의미를 전달하는 Icon에는 label을 제공합니다.

Keyboard and focus

조작 요소가 있는 화면에서는 마우스를 사용하지 않고 Tab, Shift+Tab과 해당 요소가 지원하는 키로 주요 작업을 완료해보세요. Dialog와 메뉴를 닫았을 때 원래 Trigger로 초점이 돌아오는지 확인합니다.

States and feedback

값, 선택 상태, 오류를 색상 하나로만 전달하지 않습니다. 서버 처리, 업로드, 전송 결과는 앱에서 텍스트와 필요한 live region으로 안내합니다. generating은 aria-busy를 자동으로 설정하지 않습니다.

Common checklist

컴포넌트별 Accessibility 체크리스트와 함께, 실제 사용 화면에서 다음 항목을 확인합니다.

  • 이름과 상태: 텍스트와 접근성 속성으로 이름, 값, 선택 상태와 오류 상태를 전달합니다. 색상이나 아이콘만으로 의미를 구분하지 않습니다.
  • 키보드와 초점: 조작 요소는 마우스 없이 사용할 수 있고 초점 위치가 보여야 합니다. 표시용 요소에는 불필요한 초점을 추가하지 않습니다. 요소가 닫히거나 사라진 뒤에도 초점이 의미 있는 위치로 이어지는지 확인합니다.
  • 대비와 화면 크기: 실제 배경에서 텍스트와 조작 요소의 대비를 확인합니다. 200% 확대와 좁은 화면, 밝고 어두운 테마에서도 정보나 동작이 잘리지 않는지 점검합니다.
  • 화면 읽기 프로그램: VoiceOver 등에서 이름, 역할, 상태와 읽기 순서를 실제 앱의 문맥 안에서 확인합니다. 상태 변화가 필요한 시점에 전달되고 중복 안내되지 않는지 점검합니다.
  • 움직임: 애니메이션이 있는 화면은 OS의 reduced-motion 설정에서도 확인합니다. 움직임을 줄여도 상태와 결과를 이해할 수 있어야 합니다.

공개 API에 접근성 속성이 있더라도 실제 조합이 자동으로 접근성을 보장하지는 않습니다.