SERIES 01 / WEB FOR EVERYONE
웹 접근성
누구나 사용할 수 있는 웹을 만드는 기준. 한 항목씩 깊이 이해하고, AI로 평가하는 방법을 배웁니다.
학습 순서
처음 시작하기
관점과 평가 방법을 먼저 익힙니다.
- 01웹 접근성 시작하기: WCAG와 AI로 평가를 설계하는 방법
사용자의 이용 과정에서 접근성 문제를 이해하고, WCAG 2.2와 멀티모달 AI를 활용해 평가 범위와 증거 수집 계획을 설계합니다.
인지할 수 있는 웹
정보를 보고, 듣고, 다른 형태로 이해하기.
- 02대체 텍스트: 이미지가 맡은 일을 전달하기
이미지의 존재보다 목적과 문맥을 설명하는 대안을 설계합니다.
- 03녹음된 음성과 무음 영상: 다른 경로로 같은 정보 얻기
음성 전용과 영상 전용 자료에 필요한 대안을 구분합니다.
- 04녹화 자막: 대사와 중요한 소리를 함께 전달하기
자막의 존재, 정확성, 화자 구분과 동기화를 평가합니다.
- 05화면 해설과 매체 대안: 영상에서만 보이는 정보 설명하기
녹화 영상의 시각 정보를 해설 또는 충분한 대안으로 전달합니다.
- 06실시간 자막: 생방송의 정보를 놓치지 않도록
실시간 동기화 매체의 자막을 점검하는 방법을 다룹니다.
- 07녹화 음성 해설: 화면의 핵심을 들을 수 있게
AA에서 요구하는 시각 정보의 음성 해설을 검토합니다.
- 08수어 통역: 녹화 음성의 또 다른 언어 경로
수어 통역의 제공 여부와 평가에 필요한 언어 전문성을 구분합니다.
- 09확장 음성 해설: 장면을 멈추고 설명할 시간 만들기
음성 사이의 틈이 부족한 영상에 확장 해설이 필요한지 살펴봅니다.
- 10완전한 매체 대안: 영상 전체를 문서로 따라가기
녹화 동기화 매체와 영상 전용 자료의 전체 대안을 검토합니다.
- 11실시간 음성 대안: 들을 수 없어도 안내받기
실시간 음성 전용 정보에 동등한 대안을 준비합니다.
- 12정보와 관계: 화면의 구조를 코드로도 전달하기
제목, 목록, 표, 폼의 관계를 보조 기술에 전달합니다.
- 13의미 있는 순서: 보이는 순서와 읽는 순서 맞추기
정보의 의미를 유지하는 읽기 순서를 평가합니다.
- 14감각적 지시: 오른쪽·빨간색만으로 안내하지 않기
모양, 색, 위치, 소리에 의존하는 지시를 개선합니다.
- 15화면 방향: 가로와 세로 모두 사용할 수 있게
필수 사유가 없는 화면 방향 제한을 점검합니다.
- 16입력 목적: 자동완성이 알아볼 수 있는 필드 만들기
사용자 개인정보 입력의 목적을 코드로 식별하게 합니다.
- 17요소의 목적: 사용자에게 맞게 UI를 바꿀 수 있도록
조작 요소, 아이콘, 영역의 목적을 식별하는 AAA 기준입니다.
- 18색상: 정보의 유일한 단서로 사용하지 않기
상태와 구분을 색 외의 방식으로도 전달합니다.
- 19자동 재생 음성: 멈추고 조절할 수 있게
3초 넘게 자동 재생되는 음성의 제어 경로를 확인합니다.
- 20텍스트 대비: 읽을 수 있는 명도 차이 확보하기
일반 텍스트와 큰 텍스트의 대비를 조건에 맞게 계산합니다.
- 21텍스트 확대: 200%에서도 기능 유지하기
문자 확대에서 내용과 조작이 손실되는지 확인합니다.
- 22텍스트 이미지: 실제 글자로 제공하기
이미지 속 글자 대신 조절 가능한 텍스트를 제공합니다.
- 23강화된 텍스트 대비: 더 높은 가독성 목표
AAA 대비 목표를 일반 텍스트와 큰 텍스트에 적용합니다.
- 24배경 소리: 말소리를 명확하게 전달하기
녹음된 음성 전용 자료에서 배경음을 검토합니다.
- 25텍스트 표현: 읽기 방식을 사용자가 선택하게
글줄 길이, 줄 간격, 정렬, 색상 조절을 함께 다룹니다.
- 26텍스트 이미지의 더 엄격한 기준
AAA에서 텍스트 이미지의 허용 범위를 살펴봅니다.
- 27리플로우: 좁은 화면에서도 읽고 조작하기
확대와 작은 뷰포트에서 양방향 스크롤을 줄입니다.
- 28비텍스트 대비: 조작 요소와 도형을 구별하기
컨트롤과 정보를 전달하는 그래픽의 명도 차이를 평가합니다.
- 29텍스트 간격: 읽기 설정을 바꿔도 내용 유지하기
글자·단어·줄·문단 간격 변경에 견디는 화면을 만듭니다.
- 30호버와 포커스 콘텐츠: 닫고 이동하고 읽을 수 있게
툴팁과 팝오버의 해제·포인터 이동·지속 조건을 확인합니다.
조작할 수 있는 웹
키보드, 포인터, 시간과 탐색의 장벽을 줄이기.
- 31키보드: 포인터 없이 주요 기능 수행하기
기능을 키보드로 실행할 수 있는지 실제 흐름에서 확인합니다.
- 32키보드 함정: 들어간 곳에서 빠져나오기
위젯과 대화상자에서 포커스를 이동할 경로를 확인합니다.
- 33예외 없는 키보드 지원: AAA 목표로 확장하기
모든 기능의 키보드 조작을 더 엄격한 범위에서 평가합니다.
- 34문자 단축키: 의도치 않은 실행 방지하기
단일 문자 단축키의 해제·변경·활성 범위를 점검합니다.
- 35시간 조절: 읽고 입력할 시간을 확보하기
시간 제한의 해제·조절·연장과 예외를 평가합니다.
- 36움직임과 자동 갱신: 멈추고 읽기
자동 움직임과 업데이트의 중단 수단을 확인합니다.
- 37시간에 독립적인 과제: 서두르지 않아도 완료하기
AAA에서 시간 제한 없이 기능을 완료할 수 있는지 확인합니다.
- 38방해 요소: 알림을 미루고 집중하기
긴급 상황 외의 방해를 조절할 수 있게 합니다.
- 39재인증: 작성한 내용을 잃지 않도록
세션 만료 뒤 재인증에서 데이터와 진행을 보존합니다.
- 40타임아웃 안내: 입력 전에 제한을 알리기
비활동으로 데이터를 잃을 수 있는 시간을 안내합니다.
- 41번쩍임: 위험한 시각 자극을 정량적으로 확인하기
번쩍임 횟수와 일반·적색 임계값의 평가를 구분합니다.
- 42세 번의 번쩍임: AAA의 더 엄격한 기준
초당 번쩍임 횟수의 AAA 기준을 검토합니다.
- 43상호작용 애니메이션: 움직임을 줄일 선택권
조작으로 발생하는 모션을 끌 수 있는지 확인합니다.
- 44반복 블록 건너뛰기: 본문까지 빠르게 이동하기
반복 내비게이션을 건너뛰는 경로를 확인합니다.
- 45페이지 제목: 지금 열린 내용을 식별하기
문서 제목이 주제와 목적을 설명하는지 검토합니다.
- 46포커스 순서: 조작의 의미가 이어지도록
키보드 이동 순서가 정보와 기능의 관계를 유지하는지 평가합니다.
- 47문맥 속 링크 목적: 어디로 가는지 알 수 있게
링크와 프로그램으로 연결된 문맥의 목적을 함께 평가합니다.
- 48여러 탐색 방법: 필요한 페이지에 도달하기
사이트 내 페이지를 찾는 복수의 경로를 확인합니다.
- 49제목과 레이블: 내용과 목적을 정확하게 안내하기
존재하는 제목과 레이블이 의미 있는 표현인지 평가합니다.
- 50포커스 표시: 지금 조작하는 위치 보여주기
키보드 포커스의 시각적 표시를 실제 상태에서 확인합니다.
- 51현재 위치: 사이트 안의 맥락을 알려주기
현재 페이지가 어디에 속하는지 알려주는 정보를 검토합니다.
- 52링크만으로 목적 전달하기: AAA 기준
문맥 없이도 링크의 목적을 식별하는 경로를 검토합니다.
- 53섹션 제목: 긴 내용을 나누어 탐색하기
문서를 주제별 제목으로 구성하는 AAA 기준입니다.
- 54포커스 가림: 일부라도 보이도록
AA에서 고정 요소가 포커스 대상을 완전히 가리는지 평가합니다.
- 55포커스 가림의 강화 기준: 전체 대상 보이기
AAA에서 포커스 대상의 부분 가림까지 평가합니다.
- 56포커스 모양: 충분한 면적과 대비로 표시하기
AAA 포커스 표시의 면적과 상태 간 대비를 측정합니다.
- 57포인터 제스처: 복잡한 동작의 대안 제공하기
다중 포인터와 경로 기반 제스처의 단순 조작 대안을 확인합니다.
- 58포인터 취소: 잘못 누른 동작 되돌리기
누르기와 떼기의 시점, 취소·되돌리기 수단을 검토합니다.
- 59보이는 이름과 접근성 이름 맞추기
음성 조작에서 화면의 레이블로 대상을 찾을 수 있게 합니다.
- 60동작 감지: 기기를 흔들지 않아도 실행하기
기기 움직임 기반 기능의 UI 대안과 해제 수단을 확인합니다.
- 61조작 대상 크기: AAA의 넉넉한 터치 영역
44×44 CSS px의 강화 목표와 예외를 검토합니다.
- 62동시 입력 방식: 터치와 키보드를 함께 사용하기
하나의 입력 방식 때문에 다른 방식을 제한하는지 확인합니다.
- 63드래그: 끌지 않고도 같은 결과 얻기
드래그 기능의 단일 포인터 대안을 평가합니다.
- 64조작 대상 크기: AA의 크기와 간격 조건
24×24 CSS px와 간격 등 예외를 조건에 맞게 평가합니다.
이해할 수 있는 웹
예측 가능한 동작과 입력·인증 과정.
- 65페이지 언어: 올바른 발음의 출발점
문서의 기본 언어를 프로그램이 식별하게 합니다.
- 66부분 언어: 언어가 바뀌는 구간 표시하기
본문 안의 다른 언어 구간을 의미와 예외에 맞게 표시합니다.
- 67낯선 단어: 뜻을 찾을 수 있는 경로 제공하기
전문 용어와 특별한 용법을 설명하는 방법을 검토합니다.
- 68약어: 풀어 쓴 의미에 접근하기
약어의 확장형이나 의미를 확인할 수 있게 합니다.
- 69읽기 수준: 복잡한 설명의 대안 만들기
어려운 텍스트에 이해하기 쉬운 보충 경로를 제공합니다.
- 70발음: 의미를 바꾸는 읽는 법 안내하기
발음에 따라 의미가 달라지는 표현의 확인 경로를 제공합니다.
- 71포커스만으로 화면을 바꾸지 않기
요소에 진입한 것만으로 맥락이 바뀌는지 확인합니다.
- 72입력 변경: 무엇이 일어날지 먼저 알리기
설정 변경으로 발생하는 맥락 전환의 사전 안내를 검토합니다.
- 73일관된 내비게이션: 같은 길을 같은 순서로
반복되는 탐색 구조의 상대적 순서를 유지합니다.
- 74일관된 식별: 같은 기능을 같은 이름으로
동일한 기능의 이름과 표현을 일관되게 제공합니다.
- 75요청에 따른 변화: 예상 가능한 맥락 전환
AAA에서 맥락 변경을 사용자가 요청하거나 끌 수 있게 합니다.
- 76일관된 도움말: 필요한 도움을 같은 위치에서
반복되는 도움 수단의 상대적 위치를 유지합니다.
- 77오류 식별: 어디서 무엇이 잘못됐는지 설명하기
자동으로 발견한 입력 오류를 텍스트로 전달합니다.
- 78레이블과 안내: 입력하기 전에 알 수 있게
요구하는 정보와 형식을 입력 전에 안내합니다.
- 79오류 수정 제안: 다음 행동을 안내하기
알려진 수정 방법을 오류 메시지에 연결합니다.
- 80중요한 제출: 법적·금전적·데이터 변경 확인하기
중요한 작업의 취소·검사·확인 경로를 검토합니다.
- 81문맥에 맞는 도움말: 막힌 곳에서 도움 얻기
입력과 작업의 맥락에 맞는 도움을 제공합니다.
- 82모든 제출의 오류 예방: AAA로 확장하기
정보 제출 전반의 되돌리기·검사·확인 수단을 검토합니다.
- 83중복 입력: 한 과정에서 같은 정보를 다시 묻지 않기
이미 입력한 정보를 재사용하거나 선택하도록 제공합니다.
- 84접근 가능한 인증: 기억과 퍼즐에 의존 줄이기
AA 인증에서 인지 기능 시험의 대안과 지원 수단을 검토합니다.
- 85인증의 강화 기준: 더 폭넓은 인지 접근성
AAA 인증에서 허용되는 대안과 지원 범위를 검토합니다.
견고하게 연결되는 웹
보조 기술과 이름·역할·상태를 공유하기.
- 86이름·역할·값: 보조 기술과 UI 상태 공유하기
커스텀 컨트롤의 의미와 상태 변경을 프로그램에 전달합니다.
- 87상태 메시지: 포커스를 옮기지 않고 결과 알리기
작업 결과와 진행 상태를 보조 기술에 전달합니다.
서비스로 연결하기
항목별 평가를 에이전트와 운영 과정으로 통합합니다.
- 88접근성 평가를 에이전트와 서비스로 연결하기
항목별 프롬프트를 조율하고 근거·개선·재점검을 연결하는 시스템과 자료 배포·서비스 전환 구조를 설계합니다.