공공기관 프로젝트 검수 받아본 적 있어요?

"웹접근성 미준수" 딱지 붙으면 진짜 멘탈 나가요. 수정하고 재검수 받고, 또 수정하고... 일정은 밀리고.

오늘은 React 프로젝트에서 자주 걸리는 접근성 항목들 정리해볼게요. 이거 미리 체크하면 검수 한 방에 통과할 수 있어요.

자주 걸리는 항목 TOP 5

1. 이미지 대체 텍스트

스크린 리더가 이미지를 읽을 수 없으니까, alt로 설명해줘야 해요.

2. 폼 레이블 연결

레이블 클릭했을 때 input에 포커스 가야 해요.

3. 버튼 텍스트

버튼에 텍스트가 없으면 스크린 리더가 "버튼"이라고만 읽어요. 뭐 하는 버튼인지 알려줘야 해요.

4. 키보드 접근성

Tab 키로 이동할 수 있어야 하고, Enter/Space로 실행할 수 있어야 해요.

5. 포커스 표시

키보드 사용자가 현재 어디에 있는지 알 수 있어야 해요.

컴포넌트별 체크리스트

모달/다이얼로그

role="dialog" 또는 <dialog> 사용
aria-modal="true"
제목에 aria-labelledby 연결
열릴 때 포커스 이동
닫힐 때 원래 위치로 포커스 복귀
Escape 키로 닫기
포커스 트랩 (모달 밖으로 포커스 이동 방지)

드롭다운/셀렉트

aria-haspopup="listbox" 또는 "menu"
aria-expanded 상태 관리
화살표 키로 옵션 이동
Enter로 선택
Escape로 닫기

탭

role="tablist", role="tab", role="tabpanel"
aria-selected 상태
화살표 키로 탭 이동
탭과 패널 연결 (aria-controls, aria-labelledby)

자동 체크 도구

eslint-plugin-jsx-a11y

이거 설치하면 코드 작성할 때 접근성 문제 바로 알려줘요.

axe DevTools

크롬 확장 프로그램이에요. 페이지 열어서 검사하면 접근성 문제 목록 보여줘요.

Lighthouse

크롬 개발자 도구 > Lighthouse > Accessibility 체크하면 점수 나와요. 100점 맞으면 일단 기본은 된 거예요.

귀찮으면

솔직히 이거 다 신경 쓰면서 개발하기 쉽지 않아요.

그래서 접근성 다 챙겨둔 컴포넌트 라이브러리 쓰는 게 편해요.

HANUI는 KRDS 기반 React 컴포넌트 라이브러리인데, 위에서 말한 접근성 항목들이 다 적용되어 있어요.

버튼의 aria-label 경고, 모달의 포커스 트랩, 셀렉트의 키보드 네비게이션... 전부 들어가 있어요.

검수 전 최종 체크

모든 이미지에 alt 있음
모든 폼 요소에 레이블 연결됨
키보드만으로 모든 기능 사용 가능
포커스 표시 잘 보임
색상 대비 4.5:1 이상
모달/드롭다운 키보드 동작 정상
eslint-plugin-jsx-a11y 에러 없음
Lighthouse 접근성 90점 이상

이거 다 체크하고 검수 들어가면 한 방에 통과할 수 있어요.

React 웹접근성 체크리스트 — 공공 SI 심사 통과하기