‘접근성은 공공기관만 지키면 되는 규칙 아닌가?’ 이제는 검색·법규·브랜드 신뢰 모두가 요구하는 필수 항목입니다. WCAG 2.2 기준을 간단히 이해하고 10가지 체크리스트만 따라도 ‘홈페이지 제작’ 초기 단계에서 80 % 이상의 오류를 예방할 수 있습니다.
목차
- 키보드 포커스 순서
- 대체 텍스트(ALT)
- 명도 대비 4.5 : 1
- 폼 라벨 & 오류 메시지
- ARIA Role & 상태
- 모션·애니메이션 제어
- Skip 링크 & 구조화
- 자막·자막 없는 영상
- 첨부 파일 접근성
- 자동 테스트 & CI 파이프라인
- 실전 활용 가이드
- FAQ
- 맺음말
1. 키보드 포커스 순서
Tab 키만으로 모든 링크·폼·버튼을 순서대로 이동할 수 있어야 합니다. 포커스가 시각적으로도 뚜렷해야 하며, outline 제거 대신 ‘outline-offset:2px’와 굵은 컬러를 사용합니다.
2. 대체 텍스트(ALT)
모든 의미 있는 이미지에는 ALT를 넣고, 장식용 이미지는 ALT=”(빈 문자열)로 스크린리더 건너뛰기를 설정합니다. 예: ‘제품 A 전면 사진’처럼 핵심 정보를 요약합니다.
3. 명도 대비 4.5 : 1
텍스트·아이콘과 배경 간 명도 대비를 4.5 : 1 이상 유지합니다. Figma 플러그인 ‘Stark’로 실시간 검사가 가능합니다.
4. 폼 라벨 & 오류 메시지
태그를 사용하고 aria-invalid=’true’를 오류 필드에 지정합니다. 실시간 검증 시 시각·스크린리더 동시에 알릴 수 있도록 role=’alert’ 컨테이너를 씁니다.
5. ARIA Role & 상태
다이얼로그·토글·탭 컴포넌트에는 role=’dialog’ ‘tablist’ 등을 정의하고 aria-expanded, aria-selected로 현재 상태를 명확히 표시합니다.
6. 모션·애니메이션 제어
prefers-reduced-motion : reduce 미디어 쿼리를 이용해 애니메이션을 비활성화 옵션으로 제공합니다. 3초 이상 깜빡이는 효과는 금지입니다.
7. Skip 링크 & 구조화
페이지 상단에 ‘본문 바로가기’ 링크를 숨김 포커스(outline-visible)로 제공하고, h1→h2→h3 계층을 논리적 순서로 유지해 스크린리더 흐름을 보장합니다.
8. 자막·자막 없는 영상
모든 동영상에는 동일 언어 자막을, 배경 사운드 없는 설명 영상에는 텍스트 대본 링크라도 제공해야 합니다.
9. 첨부 파일 접근성
PDF·PPT는 태그된 구조(Tagged PDF)로 저장하고, 링크 바로 앞에 ‘(PDF, 2 MB)’처럼 형식·용량을 안내합니다.
10. 자동 테스트 & CI 파이프라인
axe-core + Playwright 스크립트를 GitHub Actions에 추가하면 푸시 때마다 접근성 오류를 리포트합니다. 오류 0, 경고 ≤5를 통과 기준으로 설정합니다.
실전 활용 가이드
- 디자인 시스템에 컬러·폰트 토큰 등록
- 컴포넌트 라이브러리(React) ARIA 속성 점검
- axe-linter VS Code 플러그인 설치
- CI 파이프라인 자동 스캔 & Slack 알림
- 분기별 수동 감리(스크린리더, 키보드) 진행
FAQ
- Q 접근성 인증 의무 대상인가요?
A 공공·준공공은 필수, 민간도 조회수 100만 이상이면 권고입니다. - Q 디자인이 제한될까 걱정이에요.
A 접근성 규칙은 색·여백·순서를 명확히 할 뿐, 창의적 UI를 막지 않습니다. - Q 자동 테스트만으로 충분할까요?
A 코드 기반 오류 80 %는 자동으로 잡히지만 나머지는 수동 검수 필요입니다. - Q 비용이 많이 드나요?
A MVP 단계에서 구조를 맞추면 추후 수정 비용을 60 % 절감할 수 있습니다. - Q 인증 절차는 복잡한가요?
A 사전 감리 → 교정 → 본심사 3단계이며, 에이전시가 대행 가능합니다.
맺음말
웹접근성은 ‘사용자 배려’이자 ‘검색·브랜드 신뢰’의 핵심 지표입니다. 이번 체크리스트 10가지만 지켜도 80 % 이상의 오류를 예방할 수 있습니다. 심층 진단·인증·자동 테스트 구축이 필요하다면 상담 문의로 알려 주세요. 완료된 접근성 프로젝트는 포트폴리오 또는 웹트랜드에서 확인하실 수 있습니다.
답글 남기기