접근성

접근성은 별도의 옵션이 아니라 컴포넌트의 기본 동작과 완료 조건입니다. 마우스, 키보드, 터치, 스크린 리더, 화면 확대 등 서로 다른 방식으로도 같은 정보와 기능에 접근할 수 있어야 합니다.

기본 원칙

• 키보드: 모든 인터랙션은 키보드로 도달하고 실행할 수 있어야 하며 탐색 순서는 화면의 의미 순서와 일치해야 합니다.
• 포커스: 현재 포커스 위치를 항상 시각적으로 확인할 수 있어야 합니다. Modal처럼 맥락이 바뀌면 시작 위치와 닫힌 뒤 돌아갈 위치를 관리합니다.
• 의미 구조: button, a, 제목, 목록, 표, 폼처럼 목적에 맞는 HTML을 우선합니다. ARIA는 없는 의미를 보완할 때만 사용하며 기본 HTML 동작을 대체하지 않습니다.
• 이름과 설명: 컨트롤에는 보이는 레이블 또는 동일한 의미의 접근 가능한 이름을 제공합니다. 도움말과 오류는 해당 필드에 프로그램 방식으로 연결합니다.
• 색상과 대비: 색상만으로 선택·성공·경고·오류를 구분하지 않습니다. 텍스트, 아이콘, 패턴과 충분한 대비를 함께 사용합니다.
• 변화 알림: 저장 결과, 오류, 로딩 완료처럼 동적으로 바뀐 중요한 정보는 화면을 보지 않아도 알 수 있도록 적절한 상태 알림을 제공합니다.

컴포넌트별 확인

영역	확인할 내용
Button · Link	목적을 설명하는 이름, 키보드 실행, disabled 처리, 새 창 안내
Form	명시적 레이블, 필수·오류 상태, 입력 형식, 오류 수정과 포커스 이동
Menu · Tabs	역할과 선택 상태, 방향키 규칙, 열기·닫기 후 포커스 위치
Modal · Drawer	제목 연결, 배경 포커스 제한, Escape 닫기 정책, 닫힌 뒤 포커스 복귀
Table · List	제목과 헤더 관계, 올바른 읽기 순서, 빈 상태와 정렬 상태
Loading · Alert	상태 변화 알림, 반복 안내 방지, 사용자가 할 수 있는 다음 행동

키보드 검수 순서

1. 마우스를 사용하지 않고 Tab과 Shift+Tab으로 모든 제어에 이동합니다.
2. Enter, Space, 방향키, Escape 등 컴포넌트에 맞는 키로 동작을 실행합니다.
3. 펼침, 페이지 전환, 오류 발생 전후에 포커스가 사라지거나 예상 밖 위치로 이동하지 않는지 확인합니다.
4. 확대 상태와 작은 화면에서도 포커스 대상이 고정 헤더나 Modal에 가려지지 않는지 확인합니다.

스토리북 확인 항목

컴포넌트의 기본 예제만 확인하지 않고 hover, focus, disabled, readonly, 오류, 로딩, 빈 상태를 각각 검수합니다. 접근성 검사 도구의 자동 결과를 활용하되 키보드 흐름, 읽기 순서, 메시지 이해 가능성은 직접 확인합니다. 여러 컴포넌트를 조합한 실제 화면에서도 포커스 순서와 상태 알림이 유지되어야 합니다.