접근성 점검은 키보드, 화면 읽기 기능, 작은 화면과 확대 표시에서도 내용을 찾고 기능을 이용할 수 있는지 확인하는 작업입니다. 이 글의 10개 항목을 출발점으로 삼되 자동 검사와 실제 이용 검사를 함께 진행하세요.
목차
- 키보드 포커스 순서
- 대체 텍스트(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, 큰 글자(일반 18pt 이상 또는 굵은 글자 14pt 이상)는 3:1 기준을 확인합니다. 로고·장식 등 예외는 연결한 원문의 적용 조건을 확인합니다. 의미 있는 UI 상태·그래픽의 비텍스트 대비는 별도 3:1 기준을 확인하세요. W3C 텍스트 대비와 비텍스트 대비를 구분합니다.
4. 폼 라벨 & 오류 메시지
각 입력칸에 연결된 label을 제공하고 오류가 있는 항목과 수정 방법을 알립니다. 색상 외에도 오류 문장을 표시하고 화면 읽기 기능에서 안내가 전달되는지 확인하세요.
5. ARIA Role & 상태
다이얼로그·토글·탭 컴포넌트에는 role=’dialog’ ‘tablist’ 등을 정의하고 aria-expanded, aria-selected로 현재 상태를 명확히 표시합니다.
6. 모션·애니메이션 제어
모션 감소 설정을 반영하고 자동 움직임을 멈출 수 있는지 확인합니다. 깜빡임은 지속 시간만으로 판단하지 않으며 WCAG의 섬광 빈도·임계 기준을 따로 확인합니다.
7. Skip 링크 & 구조화
페이지 상단에 ‘본문 바로가기’ 링크를 숨김 포커스(outline-visible)로 제공하고, h1→h2→h3 계층을 논리적 순서로 유지해 스크린리더 흐름을 보장합니다.
8. 자막·자막 없는 영상
정보를 전달하는 영상은 내용과 오디오 유무에 맞는 자막·대체 설명을 확인합니다. 장식 영상과 구분하고 텍스트 대본 하나로 모든 영상 기준을 충족한다고 판단하지 않습니다.
9. 첨부 파일 접근성
PDF·PPT는 태그된 구조(Tagged PDF)로 저장하고, 링크 바로 앞에 ‘(PDF, 2 MB)’처럼 형식·용량을 안내합니다.
10. 자동 테스트 & CI 파이프라인
자동 검사에서 발견한 오류를 고친 뒤 키보드·확대·화면 읽기 검사를 수행합니다. 도구의 경고 개수만으로 접근성 전체 적합성을 판정하지 않습니다.
실전 활용 가이드
- 디자인 시스템에 컬러·폰트 토큰 등록
- 컴포넌트 라이브러리(React) ARIA 속성 점검
- axe-linter VS Code 플러그인 설치
- CI 파이프라인 자동 스캔 & Slack 알림
- 분기별 수동 감리(스크린리더, 키보드) 진행
FAQ
- Q 접근성 인증 의무 대상인가요? A 방문 수만으로 판단하지 않습니다. 기관 유형·적용 법령·발주 및 계약 조건에 따라 필요한 기준과 인증 여부를 확인하세요.
- Q 디자인이 제한될까 걱정이에요.
A 접근성 규칙은 색·여백·순서를 명확히 할 뿐, 창의적 UI를 막지 않습니다. - Q 자동 테스트만으로 충분할까요? A 아닙니다. 키보드 이동, 대체 텍스트의 의미, 오류 안내와 실제 화면 읽기 순서 등은 수동 검사도 필요합니다.
- Q 비용은 어떻게 정하나요? A 화면 수와 공통 컴포넌트, 문서·영상, 수정할 코드 범위와 필요한 검증 수준에 따라 작업량을 산정합니다.
- Q 인증 절차는 어떻게 확인하나요? A 해당 인증기관의 최신 심사 기준·신청 대상·검사 범위를 확인합니다. 진단과 수정, 인증 심사는 서로 구분해 계약하세요.
맺음말
점검 목록을 완료했다고 전체 적합성을 선언하지 않습니다. 실제 이용 경로와 자동 검사 결과, 남은 문제와 수정 내용을 함께 기록하세요.
기술 기준 확인: WCAG 2.2 원문 및 섬광 기준.
답글 남기기