웹 접근성 키보드 탐색·대체 텍스트·명도 대비, 사용자가 막히지 않는 화면 만들기

회원 가입을 하려던 사람이 마우스를 잠시 내려놓고 키보드의 탭 키를 눌렀습니다. 그런데 화면에서 현재 선택된 메뉴가 보이지 않고, 팝업을 닫을 방법도 찾기 어렵습니다. 누군가에게는 몇 초의 불편이지만, 키보드나 화면 읽기 프로그램을 주로 쓰는 사람에게는 사이트 이용을 포기하게 만드는 장벽이 될 수 있습니다.

웹 접근성은 장애가 있는 사람만을 위한 기능이 아닙니다. 밝은 햇빛 아래 휴대전화를 보는 사람, 손을 다쳐 마우스를 쓰기 힘든 사람, 작은 글씨를 읽기 어려운 고령자도 영향을 받습니다. 이 글을 읽으면 웹 접근성이 무엇인지, 디자인과 콘텐츠를 만들 때 어디를 확인해야 하는지, 실제 점검 순서를 알게 됩니다.

웹 접근성이란 무엇인가

웹 접근성은 누구나 웹사이트의 정보와 기능을 이용할 수 있게 만드는 원칙입니다. 여기서 ‘누구나’는 시각·청각·운동·인지 능력에 어려움이 있는 사람뿐 아니라 기기와 환경이 다른 사용자까지 포함합니다.

예를 들어 버튼을 마우스로 누를 수 있다는 것만으로는 충분하지 않습니다. 키보드로도 버튼까지 이동하고 실행할 수 있어야 합니다. 이미지에 글자만 넣었다면 화면 읽기 프로그램이 그 내용을 전달할 수 있도록 대체 텍스트도 필요합니다.

웹 접근성은 보통 네 가지 관점으로 살펴봅니다. 내용을 눈이나 귀로 확인할 수 있는지, 키보드 등 다른 방법으로 조작할 수 있는지, 사용 방법을 예측할 수 있는지, 보조기술과 다양한 환경에서 제대로 해석되는지입니다. 디자인, 개발, 콘텐츠가 따로 해결할 문제가 아니라 서로 맞물린 작업입니다.

먼저 확인할 웹 접근성 체크리스트

• 키보드 이동: 탭 키만 눌러도 로고, 메뉴, 검색, 본문, 버튼 순서로 자연스럽게 이동하는지 확인합니다. 현재 위치를 보여 주는 테두리나 색 변화가 사라지면 안 됩니다.
• 초점 순서: 화면에 보이는 순서와 키보드 이동 순서가 크게 다르지 않아야 합니다. 팝업이 열렸는데 초점이 뒤쪽 내용으로 빠지면 사용자는 팝업을 놓칠 수 있습니다.
• 색상과 대비: 회색 글자와 흰 배경처럼 색 차이가 약한 조합은 피합니다. 색만으로 오류나 상태를 알리지 말고 아이콘, 문구, 테두리도 함께 사용합니다.
• 이미지 설명: 정보를 전달하는 이미지에는 무엇을 보여 주는지 짧고 구체적인 대체 텍스트를 넣습니다. 장식용 이미지라면 읽을 내용이 없다는 점을 기술적으로 처리해야 합니다.
• 입력 안내: 이름, 전화번호, 주소 입력란에 무엇을 어떤 형식으로 적어야 하는지 알려 줍니다. 오류가 생기면 문제가 있는 항목과 고치는 방법을 함께 보여 줍니다.
• 움직임과 소리: 자동 재생 영상, 깜빡이는 배너, 갑자기 나타나는 팝업에 멈춤이나 닫기 방법이 있는지 봅니다.

이 목록은 첫 점검용입니다. 실제 준수 여부는 적용 기준과 서비스 성격에 따라 달라질 수 있으므로, 인증이나 공공 서비스 납품을 앞두었다면 관련 공식 안내에서 최신 기준을 다시 확인해야 합니다.

겉보기 좋은 화면과 이용하기 좋은 화면의 차이

웹 접근성을 고려하면 디자인 선택이 제한된다고 생각하기 쉽습니다. 그러나 차이는 장식의 양보다 정보 전달 방식에 있습니다. 아래처럼 비교하면 판단하기 편합니다.

확인 항목	문제가 생기기 쉬운 방식	더 나은 방식
버튼	아이콘만 있고 역할이 불분명함	‘검색’, ‘닫기’처럼 기능을 글로 표시함
링크	모든 링크가 ‘자세히 보기’임	어떤 글이나 자료로 이동하는지 적음
이미지	파일명이나 같은 문장을 반복함	이미지가 전달하는 핵심 정보만 설명함
오류 표시	입력 칸 테두리만 빨갛게 바꿈	오류 이유와 수정 방법을 문장으로 안내함
메뉴	마우스를 올려야만 하위 메뉴가 열림	키보드와 터치에서도 열고 닫을 수 있음

대체 텍스트는 사진 설명문을 길게 쓰는 일이 아닙니다. 온라인 쇼핑몰의 빨간 운동화 사진이라면 ‘운동화 사진’보다 ‘흰 밑창이 있는 빨간 운동화’가 낫습니다. 반대로 주변 분위기만 꾸미는 이미지라면 상품명이나 본문 내용을 다시 반복하지 않는 편이 좋습니다.

웹 접근성 점검을 진행하는 순서

1. 주요 이용 흐름을 정합니다. 회원 가입, 상품 검색, 결제, 문의 등록처럼 사용자가 자주 하는 일을 고릅니다. 모든 페이지를 처음부터 살피기보다 중요한 흐름을 먼저 확인하는 편이 효율적입니다.
2. 마우스를 치우고 이동합니다. 탭, 쉬프트와 탭, 엔터, 방향키만으로 시작부터 완료까지 진행합니다. 어디에 있는지 보이지 않거나 같은 곳을 반복해서 방문하면 기록합니다.
3. 화면 읽기 방식으로 내용을 들어 봅니다. 제목이 제목으로 읽히는지, 버튼과 링크의 이름이 구분되는지, 입력란의 안내가 연결되는지 확인합니다. 무료 점검 도구는 놓친 부분을 찾는 데 도움을 주지만 사람의 판단을 대신하지는 못합니다.
4. 확대와 작은 화면을 확인합니다. 글자를 크게 했을 때 문장이 잘리거나 버튼이 겹치지 않는지 봅니다. 가로로 밀어야만 내용을 읽을 수 있는지도 확인합니다.
5. 문제의 원인을 나눠 수정합니다. 색상 문제는 디자인, 버튼 이름은 콘텐츠나 개발, 초점 이동은 구조 문제일 수 있습니다. 담당자에게 ‘불편함’만 전달하지 말고 재현 방법과 영향을 함께 적습니다.

점검 기록에는 페이지 주소, 사용한 기기, 발생한 행동, 실제 결과, 바라는 결과를 남기면 좋습니다. 예를 들어 ‘회원 가입 중 생년월일 입력란에서 탭을 누르면 다음 항목이 아니라 상단 메뉴로 이동함’처럼 쓰면 수정 방향이 분명해집니다.

자주 하는 실수와 놓치기 쉬운 부분

첫 번째 실수는 자동 점검 결과만 보고 접근성이 끝났다고 생각하는 것입니다. 자동 도구는 색 대비나 누락된 이름처럼 규칙으로 찾기 쉬운 문제에는 강하지만, 대체 텍스트가 실제 의미를 잘 전달하는지까지 판단하기는 어렵습니다.

두 번째는 ‘색을 빼면 접근성이 좋아진다’고 생각하는 것입니다. 색을 사용할 수는 있지만 색만으로 정보를 전달하면 안 됩니다. 예를 들어 오류 입력란을 빨간 테두리로만 표시하지 말고 ‘비밀번호는 8자 이상 입력해 주세요’라는 안내를 함께 제공해야 합니다.

세 번째는 대체 텍스트에 ‘이미지’라는 말을 반복하는 것입니다. 화면 읽기 프로그램은 이미지를 이미지로 알려 주는 경우가 많으므로, 중요한 장면이나 기능을 바로 말하는 편이 낫습니다. 차트라면 색 이름만 나열하지 말고 제목, 기간, 비교 결과를 글로도 제공합니다.

네 번째는 팝업과 동적 화면을 빼먹는 것입니다. 버튼을 눌러 내용이 바뀌었는데 사용자가 그 사실을 알 수 없거나, 닫은 뒤 초점이 엉뚱한 곳으로 이동하면 이용 흐름이 끊깁니다. 새 내용이 나타났다는 안내와 다시 돌아갈 위치를 함께 설계해야 합니다.

웹 접근성에 관해 자주 묻는 질문

웹 접근성은 장애인만 확인하면 되나요?

아닙니다. 키보드 사용자는 손목 통증이나 일시적인 부상 때문에 마우스를 쓰지 못하는 사람도 포함합니다. 자막은 청각장애인뿐 아니라 소리를 켜기 어려운 장소에서 영상을 보는 사람에게도 도움이 됩니다.

웹 접근성 인증 마크가 있으면 모든 문제가 없나요?

인증은 정해진 기준에 따라 확인했다는 의미이지, 모든 사용자 경험이 항상 완벽하다는 뜻은 아닙니다. 인증 범위와 검사 시점, 제외된 기능이 있는지 관련 기관의 공식 안내에서 확인하는 것이 안전합니다.

작은 회사나 개인 블로그도 점검해야 하나요?

규모와 관계없이 기본적인 점검이 필요합니다. 우선 제목 구조, 링크 이름, 키보드 이동, 이미지 설명, 색 대비처럼 반복해서 확인할 수 있는 항목부터 고치면 됩니다. 새 글과 새 기능을 만들 때 같은 실수를 줄이는 것이 한 번에 많은 문제를 고치는 것보다 효과적입니다.

가장 먼저 고칠 한 가지를 고른다면 무엇인가요?

사용자가 핵심 기능을 완료할 수 있는지부터 봅니다. 회원 가입 버튼을 키보드로 누를 수 없는 문제, 오류 원인을 알 수 없는 입력창, 닫을 수 없는 팝업은 시각적인 간격보다 먼저 수정할 문제입니다. 접근성은 별도 장식이 아니라 사용자가 목적을 끝까지 달성하도록 돕는 화면의 기본 조건입니다.