접근 가능한 프론트엔드 컴포넌트 구축하기
접근성은 필수 사항입니다. 선택 사항이 아닙니다.
코드를 작성하기 전에 계획하세요. 사용자 목록을 만드세요.
- 스크린 리더 사용자.
- 키보드만 사용하는 사용자.
- 색약 사용자.
먼저 네이티브 HTML을 사용하세요.
- 버튼에는 button 태그를 사용하세요.
- 폼에는 input 태그를 사용하세요.
- 네이티브 HTML로 해결할 수 없을 때만 ARIA를 추가하세요.
키보드를 우선시하세요.
- 모든 컨트롤이 마우스 없이도 작동하도록 하세요.
- 포커스 표시기가 보이도록 유지하세요.
- 모달에서 포커스를 가두세요(trap focus).
시각 정보 그 이상을 고려하여 디자인하세요.
- 오류를 표시할 때 색상만 사용하지 마세요.
- 알림에 텍스트 레이블을 추가하세요.
- 대비율을 확인하세요.
오류를 적절히 처리하세요.
- 사용자에게 실수를 수정할 수 있는 명확한 방법을 제시하세요.
- 잘못된 입력에는 aria-invalid를 사용하세요.
- 업데이트 사항에는 aria-live를 사용하세요.
작업물을 테스트하세요.
- axe-core 또는 Lighthouse를 사용하세요.
- 스크린 리더로 사이트를 직접 사용해 보세요.
- Tab 키로 모든 버튼을 테스트하세요.
커스텀 div 대신 네이티브 요소를 선택하세요. 시간이 절약되고 더 잘 작동합니다.