1. 접근성과 UX
- 아이콘 버튼 →
aria-label로 의미 전달
- 모션 효과 →
prefers-reduced-motion으로 조절
- 포커스 아웃라인 제거 →
:focus-visible로 키보드 사용자만 표시
- 결론: 접근성과 UX는 충돌 아닌 보완 관계
2. 프론트엔드 프레임워크 접근성
1) 시맨틱 태그 우선
<div onClick> ❌<button onClick> ✅
2) 키보드 포커스 이동
useEffect(() => {
if (modalOpen) inputRef.current?.focus();
}, [modalOpen]);
3) ARIA는 신중하게
- HTML로 해결 가능하면 ARIA 쓰지 말기
- 과한 ARIA는 혼란 유발
3. 사용자 환경별 UI 설계
1) 키보드 사용자
Tab 접근 가능해야 함 :focus-visible로 현재 위치 표시
2) 색약/색맹 사용자
- 색 외 텍스트, 아이콘도 활용
- 색상 대비 4.5:1 이상 권장
3) 저시력 사용자
- 폰트 단위:
rem 또는 em
prefers-contrast로 고대비 적용
4) 스크린리더 사용자
- 시맨틱 태그 +
aria-label, label 등 활용
- 제목 구조 유지, 중복 설명 지양
4. 접근성 도구 사용
도구 남용 시 문제
- 정보 중복 읽힘
- 시맨틱 태그와
role 충돌
- 유지보수 어려움
사용 가이드
- 시맨틱 태그 먼저
- 꼭 필요할 때만 ARIA 사용
- 실제 스크린리더 테스트 권장