도입 스토리
입사 첫 날 아침, 김개발은 팀장 회의실 앞을 지나가다 심각한 분위기를 감지했습니다.
"지난 분기 공공기관 프로젝트, 접근성 감사에서 또 탈락했습니다. 이번엔 정말 납기가 위험합니다."
팀장의 목소리가 들렸습니다. 김개발은 자기 자리로 돌아와 앉았고, 잠시 후 옆자리 박멘토가 커피를 들고 왔습니다.
"첫 날부터 긴장한 얼굴이네요. 방금 회의 들었죠?" 박멘토가 웃으며 말했습니다.
"접근성 감사가 뭔가요? 통과 못 하면 어떻게 되는 거예요?"
박멘토는 의자를 당겨 앉았습니다. "잘 물었어요. 웹접근성을 제대로 이해하려면, 장애인이 웹을 어떻게 사용하는지부터 알아야 해요. 잠깐 눈을 감아보세요."
핵심 개념 설명
시각장애인이 웹을 사용하는 방법
시각장애인은 스크린리더(Screen Reader)라는 소프트웨어를 사용합니다. 스크린리더는 화면의 내용을 음성으로 읽어주거나 점자 디스플레이로 출력합니다.
스크린리더 사용자가 웹 페이지에 접속하면, 마우스는 사용하지 않습니다. 키보드의 Tab 키로 페이지를 이동하고, Enter 키로 링크나 버튼을 활성화합니다.
이때 스크린리더가 읽는 것은 HTML의 구조와 텍스트입니다. 이미지에 대체 텍스트(alt)가 없으면 "이미지"라고만 읽히거나 파일명을 읽어줍니다. <div> 안에 "구매하기"라는 텍스트만 있고 버튼 역할이 없으면, 스크린리더는 이것이 클릭할 수 있는 요소인지 알지 못합니다.
청각장애인이 웹을 사용하는 방법
청각장애인은 소리 대신 시각 정보에 의존합니다. 영상 콘텐츠에 자막이 없으면, 청각장애인은 영상의 내용을 전혀 이해할 수 없습니다.
음악이나 알림음만으로 상태를 전달하는 인터페이스도 문제입니다. 예를 들어 "빰!" 소리로만 에러를 알린다면, 청각장애인은 무슨 일이 생겼는지 알 수 없습니다.
운동 장애인이 웹을 사용하는 방법
손의 조작이 어려운 사용자는 마우스를 사용하기 힘듭니다. 이들은 키보드만으로, 또는 스위치 컨트롤, 음성 인식 같은 대체 입력 장치를 사용합니다.
키보드로 Tab을 눌렀을 때 포커스(현재 위치 표시)가 보이지 않는다면, 어디에 있는지 알 수 없습니다. 클릭 대상이 너무 작아도 문제가 됩니다.
인지 장애인이 웹을 사용하는 방법
난독증, 주의력 결핍, 기억력 문제 등 인지 장애가 있는 사용자는 복잡한 문장, 일관되지 않은 내비게이션, 갑작스러운 화면 전환에 어려움을 겪습니다.
명확하고 간결한 언어, 일관된 레이아웃, 충분한 시간이 필요합니다.
일시적 장애와 상황적 제약
접근성은 영구적 장애가 있는 사람만을 위한 것이 아닙니다.
- 팔이 부러져 한 손만 쓸 수 있는 상황
- 밝은 햇볕 아래서 화면이 잘 보이지 않는 상황
- 시끄러운 지하철에서 소리를 들을 수 없는 상황
- 노안으로 작은 글씨가 잘 안 보이는 상황
이 모든 경우에 접근성 좋은 웹은 더 나은 경험을 제공합니다.
단계별 실습
따라하기: 키보드만으로 웹사이트 탐색하기
마우스를 옆으로 치우고, 키보드만으로 웹사이트를 탐색해봅니다.
- 아무 웹사이트나 열어봅니다. (예: 즐겨찾는 쇼핑몰)
Tab키를 누르며 포커스가 어디로 이동하는지 확인합니다.Enter키로 링크나 버튼을 클릭해봅니다.Shift + Tab으로 반대 방향으로 이동해봅니다.
확인 포인트:
- 포커스가 눈에 보이는가? (파란 테두리 등)
- 논리적인 순서로 이동하는가?
- 모든 기능을 키보드로 사용할 수 있는가?
변형하기: 색상만으로 정보를 전달하는 예시 찾기
접속한 웹사이트에서 "빨간색 = 에러, 초록색 = 성공"처럼 색상만으로 상태를 전달하는 요소를 찾아봅니다. 색각이상이 있는 사용자에게는 어떻게 보일지 생각해봅니다.
Chrome 개발자 도구 → Rendering 탭 → Emulate vision deficiencies에서 색각이상 시뮬레이션을 해볼 수 있습니다.
정리와 확인
핵심 내용 요약
- 시각장애인: 스크린리더 + 키보드로 웹 탐색. HTML 구조와 텍스트에 의존.
- 청각장애인: 영상 자막, 시각적 알림 필요.
- 운동 장애인: 키보드 접근성, 충분한 클릭 영역 필요.
- 인지 장애인: 명확한 언어, 일관된 레이아웃 필요.
- 접근성은 모든 상황의 모든 사용자를 위한 것.
확인 문제
문제 1. 시각장애인이 이미지를 이해하기 위해 필요한 HTML 속성은 무엇인가요?
alt 속성 (대체 텍스트). <img src="logo.png" alt="회사 로고">
문제 2. 키보드만으로 웹을 탐색할 때 사용하는 주요 키 두 가지는?
Tab (다음 포커스 이동), Enter (활성화)
다음 챕터에서는 박멘토가 한국의 법적 의무와 KWCAG 2.2를 설명합니다. 접근성이 "해야 하는 이유"에서 "어떻게 해야 하는지"로 넘어가는 출발점입니다.