Accessibility는 장애 유무, 환경과 관계없이 모든 사용자가 웹을 사용할 수 있게 만드는 것입니다.

♿ WCAG 4원칙 (POUR)

• Perceivable: 대체 텍스트, contrast, 자막
• Operable: 키보드, focus, 충분한 시간
• Understandable: 예측 가능, 에러 안내
• Robust: 보조 기술과 호환

✅ 프론트엔드 체크리스트

• 시맨틱 HTML: button, nav, main, heading 계층
• 키보드: Tab 순서, focus visible, Esc로 모달 닫기
• 이미지: 의미 있는 alt, 장식은 alt=""
• 폼: label 연결, aria-invalid, 에러 메시지
• 색: contrast 4.5:1 (일반 텍스트), 색만으로 정보 전달 금지
• ARIA: HTML로 부족할 때만. role, aria-label, aria-live

🧰 도구

• axe DevTools, Lighthouse a11y
• VoiceOver, NVDA 스크린 리더 테스트
• eslint-plugin-jsx-a11y

🔗 참고 자료

• Accessibility (MDN) — 웹 접근성 개요, 가이드, ARIA 참고로 연결한다.
• WCAG 2 Overview (W3C WAI) — POUR 원칙과 WCAG 성공 기준의 공식 개요다.
• Understanding WCAG (MDN) — WCAG 권고를 실무 관점으로 풀어 설명한다.
• ARIA (MDN) — HTML만으로 부족한 UI에 의미를 보강하는 ARIA를 다룬다.