실무 적용

단계별 웹 접근성 실무 적용 가이드

웹 접근성의 준수는 기획, 디자인, 개발 등 모든 역할에서 긴밀히 협력해야 이루어질 수 있다. 각 역할에 맞는 웹 접근성 실무 적용 방안의 예시는 다음과 같다.

기획
- 사용자 요구사항에 접근성 기준 포함
- 콘텐츠 및 상호작용 방식을 접근성을 고려하여 기획
디자인
- 명도 대비, 색상 사용, 텍스트 크기, 버튼 크기 등 접근성을 고려한 UI 디자인
- 사용자 인터페이스의 일관성 유지
개발
- HTML, CSS, ARIA 등 기술 표준에 맞춰 개발
- 접근성 준수 코드 작성 및 테스트
점검
- 접근성 평가 도구 활용하여 콘텐츠 검증
- 접근성 준수 여부를 지속적으로 모니터링 및 관리

이러한 접근성 적용 방안을 기반으로, 조직에 맞는 최적의 접근성 전략을 수립하는 과정이 필요하다.

웹 접근성 업무 프로세스 가이드

본 가이드는 웹 접근성 개선 프로젝트를 처음 수행하는 제작자를 위해 업무를 수행할 수 있도록 기본 프로세스를 다뤄본다.

업무 준비 단계
- 웹 접근성 관련 기준 확인 (한국형 웹 콘텐츠 접근성 지침 2.2, 웹 접근성 품질 인증 심사 지침)
- 웹 접근성 표준 및 관련 법률 숙지
- 접근성 관련 도구 선정 및 설치 (자동 접근성 진단 도구-openWAX, WAVE, axe-core, 화면낭독프로그램- 센스리더, NVDA, VoiceOver, 명도 대비 검사도구- CCA 등)
현황 진단 및 분석
- 웹사이트 진단 및 평가
- 자동 점검 도구를 활용한 초기 진단 (예: openWAX, WAVE, axe-core)
- 키보드만 사용한 수동 진단
- 화면낭독프로그램(NVDA, VoiceOver, TalkBack 등)을 사용한 수동 진단
- 접근성 체크리스트 기반 평가
- 발견된 문제점 목록화 및 우선순위 설정
계획 수립
- 접근성 개선 일정 및 담당자 설정 (예: 1개월 단위 일정표 양식)
- 기획, 디자인, 개발자 협업 방안 설정
- 역할 분담 및 책임자 지정
- 내부 협업 및 커뮤니케이션 전략 제시 (예: 주간 점검 회의 운영 방안)
디자인/개발 단계
- 사례 기반 접근성 개선 코드 활용
- 적절한 대체 텍스트 작성 사례 참고
- 자막 및 수어를 포함한 멀티미디어 콘텐츠 제작
- 텍스트 명도 대비 기준 준수 (명도 대비 4.5:1 이상)
- 키보드만으로 이용 가능하도록 모든 기능 설계
내부 접근성 평가 및 검수
- 자체 점검 체크리스트를 통한 평가 수행
- 화면낭독프로그램와 키보드만으로 콘텐츠 이용 가능성 최종 점검
- 발견된 추가 오류 수정 및 보완
외부 인증 및 사용자 테스트 고려
- 공식 인증기관에 접근성 품질 인증 신청
- 사용자 심사 대응을 위한 준비 사항 및 실제 대응 사례 검토
유지 보수
- 접근성 체크리스트를 활용한 정기 모니터링 계획 (예: 월별, 분기별, 연 1회)
- 콘텐츠 업데이트 등 접근성 변경 사항 지속 모니터링
- 접근성 점검 결과 기록 및 보고서 작성 예시 제공

웹 접근성 진단 결과 보고서 예시

진단 일시: YYYY-MM-DD
진단 도구: openWAX, iOS VoiceOver 16.x, Android Talkback 14.x
진단 대상 URL: www.example.com
발견된 문제:
- 이미지 대체 텍스트 누락 (메인 페이지, URL, 총 5건)
- 키보드 초점 이동 순서 불일치 (로그인 페이지, URL)
- 명도 대비 기준 미충족 (텍스트 버튼, URL, 총 2건)

웹 접근성 체크리스트(요약본) 예시

다음은 KWCAG 2.2의 33개 검사항목을 기반으로 웹 접근성을 점검할 수 있는 요약 체크리스트이다. 각 검사항목은 웹사이트 제작 및 운영 시 접근성을 준수하기 위해 반드시 확인해야 하는 핵심 요소들을 포함하고 있다.

상세한 내용이 필요한 경우 해당 문서의 각 검사항목 별 기본 규칙을 참고하여 보강할 수 있다.

번호	검사항목	평가 방법	세부 체크 항목
1	적절한 대체 텍스트 제공	수동 자동	- 이미지 alt 속성이 적절히 제공되었는가? - 의미 있는 배경이미지에 대체 텍스트가 제공되었는가? - 의미 없는 이미지의 alt 속성이 빈값인가? - 소리로만 제공된 의미있는 정보에 대체텍스트가 제공되는가?
2	자막 제공	수동	- 자막이 제공되었는가? - 자막이 콘텐츠와 동기화되어 있는가?
3	표의 구성	수동 자동	- 표 제목 및 헤더가 적절히 제공되었는가? - 표 구조가 논리적인가? - 레이아웃 목적으로 사용된 표인가?
4	콘텐츠의 선형구조	수동	- 콘텐츠가 논리적이고 명확한 순서로 구성되었는가? - 보조 기술에서 제공되는 순서가 일관적인가?
5	명확한 지시사항 제공	수동	- 색, 모양, 위치 등에만 의존하지 않고 지시사항이 제공되었는가?
6	색에 무관한 콘텐츠 인식	수동 자동	- 색상을 제거했을 때 인식할 수 있도록 텍스트나 무늬 등으로 정보가 전달되는가?
7	자동 재생 금지	수동	- 자동 재생되는 소리가 없는가? - 자동 재생될 경우 3초 내 정지 가능한가?
8	텍스트 콘텐츠의 명도 대비	자동	- 텍스트와 배경 간 명도 대비가 기준을 충족하는가? (일반 4.5:1, 큰 글자 3:1)
9	콘텐츠 간의 구분	수동	- 콘텐츠 영역이 명확히 구분될 수 있도록 시각적으로 구분되어 있는가?
10	키보드 사용 보장	수동	- 모든 기능을 키보드만으로 사용할 수 있는가?
11	초점 이동과 표시	수동	- 초점이 논리적으로 이동하며 명확히 표시되는가?
12	조작 가능	수동	- 링크, 버튼 등의 크기가 조작하기에 충분한가?
13	문자 단축키	수동	- 문자 단축키 오작동 방지를 위해 비활성화하거나 수정하는 등 기능이 제공되었는가?
14	응답시간 조절	수동	- 시간제한 콘텐츠에 응답시간 조절 기능이 제공되었는가?
15	정지 기능 제공	수동	- 움직임이 자동 재생되는 콘텐츠에 정지 기능이 제공되는가?
16	깜빡임과 번쩍임 사용 제한	자동	- 번쩍임이나 깜빡임이 초당 3회 이하인가?
17	반복 영역 건너뛰기	수동 자동	- 반복 콘텐츠를 건너뛰는 링크가 제공되었는가?
18	제목 제공	수동 자동	- 페이지, 프레임, 콘텐츠 블록에 적절한 제목이 제공되었는가?
19	적절한 링크 텍스트	수동 자동	- 링크 텍스트만으로 목적을 명확히 알 수 있는가?
20	고정된 참조 위치 정보	수동	- 사용자 환경이나 설정 변경에도 고정된 페이지를 알 수 있고 이동 기능을 제공하는가?
21	단일 포인터 입력 지원	수동	- 복잡한 동작 대신 단일 포인터 입력으로 조작 가능한가?
22	포인터 입력 취소	수동	- 잘못된 포인터 입력을 쉽게 취소할 수 있는가?
23	레이블과 네임	수동 자동	- 레이블 텍스트가 보조 기술에서도 동일하게 인식되는가?
24	동작기반 작동	수동	- 동작기반 기능이 버튼이나 인터페이스로 대체 가능한가?
25	기본 언어 표시	자동	- 웹페이지의 기본 언어가 HTML 속성으로 표시되었는가?
26	사용자 요구에 따른 실행	수동	- 사용자 입력 없이 페이지 변화나 팝업이 나타나지 않는가?
27	찾기 쉬운 도움 정보	수동	- 도움 정보가 모든 페이지에서 동일 위치에 제공되는가?
28	오류 정정	수동	- 사용자 입력 오류 시 오류 위치와 해결 방법이 명확히 안내되는가?
29	레이블 제공	수동 자동	- 입력 요소에 대응하는 레이블이 제공되고 보조 기술로 인식 가능한가?
30	접근 가능한 인증	수동	- 인지능력에만 의존하지 않는 인증 방식을 제공하는가?
31	반복 입력 정보	수동	- 반복적으로 입력해야 하는 정보가 자동 또는 선택 입력으로 제공되는가?
32	마크업 오류 방지	자동	- 마크업 언어가 문법 오류 없이 구성되었는가?
33	웹 애플리케이션 접근성 준수	수동	- 웹 애플리케이션는 접근성이 있는가? - 웹 애플리케이션이 보조 기술과 호환되는가?