홈페이지가 정상적으로 열리고 디자인이 완성됐다고 해서 모든 방문자가 같은 방식으로 이용할 수 있는 것은 아닙니다. 마우스 대신 키보드를 쓰거나, 글자를 크게 확대하거나, 화면의 내용을 음성으로 듣는 사람도 있습니다. 운영자가 먼저 살펴볼 수 있는 질문은 사용자가 필요한 정보를 읽고 주요 행동을 마칠 수 있는가입니다. 이번 글에서는 제작사에 구체적인 개선 요청을 전달하기 위해 확인할 항목을 정리합니다.
1. 마우스 없이 주요 기능을 이용해 보세요
웹 접근성 점검은 평소와 다른 방식으로 사이트를 사용해 보는 데서 시작할 수 있습니다. 마우스를 내려놓고 Tab 키로 메뉴와 링크, 문의 입력란을 이동해 보세요. 현재 선택한 위치가 보이는지, 화면의 읽는 순서와 이동 순서가 자연스럽게 이어지는지 기록합니다. W3C의 키보드 안내는 마우스로 수행하는 기능에 키보드로 이용할 수 있는 방법을 제공하도록 설명합니다.
키보드 탐색으로 메뉴를 열었는데 닫을 수 없거나, 팝업 안에 갇혀 다음 내용으로 갈 수 없다면 수정할 문제입니다. 처음에는 메인 화면에서 서비스 소개를 읽고 문의 양식까지 도달하는 짧은 경로를 정해 살펴보세요. 담당자에게는 단순히 불편하다는 말 대신 문제가 발생한 주소, 누른 키, 멈춘 위치를 함께 전달하면 재현하기 쉽습니다.
근거 자료: W3C WAI — 키보드 사용 · W3C WAI — 첫 접근성 검토
2. 이미지가 전달하는 정보를 문장으로 남기세요
웹 접근성 점검에서는 대체텍스트가 존재하는지뿐 아니라 이미지의 역할에 맞는지도 살펴야 합니다. 서비스 진행 과정을 설명하는 그림이라면 핵심 정보를 전달하고, 링크나 버튼으로 쓰이는 그림이라면 실행할 기능을 설명합니다. 파일명이나 메인 키워드를 반복하는 문장은 그림을 대신하는 설명이 되기 어렵습니다.
W3C는 정보성 이미지, 기능성 이미지, 장식용 이미지를 구분합니다. 의미를 전달하지 않는 순수 장식에는 빈 대체텍스트를 사용하는 경우가 있으므로 모든 그림에 긴 설명을 붙이는 것이 목표는 아닙니다. 운영자가 새 사진을 올릴 때에는 주변 본문에서 이미 전달한 내용과 사진만이 보여주는 내용을 구분해 보세요. 복잡한 표나 도표라면 짧은 문구에 모두 압축하기보다 본문에서도 같은 정보를 읽을 수 있도록 준비합니다.
근거 자료: W3C WAI — 이미지 대체텍스트
3. 글자와 배경이 충분히 구분되는지 확인하세요
웹 접근성 점검에서 색상 대비는 취향만으로 판단하기 어려운 항목입니다. 연한 회색 본문이나 사진 위의 작은 글자는 화면에서 멋있어 보여도 읽기 어려울 수 있습니다. 브랜드 색을 유지하더라도 글자와 배경의 조합을 별도로 확인하세요. 대비 측정 도구로 실제 색상값을 검사하고 적용하려는 기준의 글자 크기와 예외 조건을 함께 검토합니다.
W3C의 텍스트 대비 안내는 글자와 배경 사이의 충분한 차이가 필요하다고 설명합니다. 특히 사진이나 그라데이션 배경에서는 위치에 따라 읽기 쉬운 정도가 달라질 수 있으므로 한 지점만 확인하지 마세요. 선택 여부나 오류를 색 하나로만 표시하는 부분도 찾아봅니다. 색과 함께 이름, 문장, 표시 형태를 제공하면 상태를 이해하는 데 도움이 됩니다.
근거 자료: W3C WAI — 텍스트 대비 · W3C WAI — 첫 접근성 검토
4. 제목을 읽는 것만으로 글의 구조가 보이게 하세요
웹 접근성 점검을 할 때 화면에서 크게 보이는 문장이 실제 제목 요소로 작성됐는지 확인합니다. 제목 구조는 단순한 글자 크기 장식이 아니라 내용의 관계를 나타냅니다. W3C는 제목을 단계에 맞춰 구성하고, 가능하면 중간 단계를 건너뛰지 않도록 안내합니다. 화면 낭독기 등은 이 구조를 활용해 내용을 탐색할 수 있습니다.
운영자가 원고를 등록할 때에는 페이지의 주제, 큰 단락, 그 아래 세부 내용을 먼저 나누세요. 예를 들어 제작 과정이라는 큰 단락 아래에 자료 준비와 시안 검토가 들어가면 각각의 관계가 제목 단계에 반영돼야 합니다. 글씨를 작게 보이게 하려고 더 낮은 제목 단계를 선택하지 말고 시각적 크기는 디자인 설정으로 조정합니다. 제목만 차례로 읽었을 때 방문자가 필요한 내용을 찾을 수 있는지도 확인하세요.
근거 자료: W3C WAI — 제목 구조
5. 문의 양식의 항목 이름과 오류 설명을 확인하세요
웹 접근성 점검에서는 문의 폼에 무엇을 입력해야 하는지 계속 알 수 있어야 합니다. 입력을 시작하면 사라지는 예시 문구만으로 항목 이름을 대신하지 마세요. W3C는 입력란과 그 목적을 설명하는 이름을 연결하도록 안내합니다. 이름, 이메일, 문의 내용처럼 필요한 항목의 표시가 실제 입력 요소와 연결돼 있는지 제작 담당자에게 확인합니다.
필수 정보를 빠뜨리거나 형식에 맞지 않게 입력했을 때도 살펴보세요. 오류 안내는 어떤 항목이 문제인지와 어떻게 고칠 수 있는지를 이해하기 쉬운 말로 전달해야 합니다. 붉은 테두리만 보여주거나 실패했다는 문장만 띄우면 사용자가 다시 시도하기 어렵습니다. 접수에 성공했을 때에는 완료 상태가 분명히 전달되는지도 확인하고, 시험 문의는 실제 고객의 개인정보 대신 구분 가능한 테스트 자료로 진행하세요.
근거 자료: W3C WAI — 입력 항목의 이름 · W3C WAI — 입력 결과와 오류 안내
6. 글자를 확대해도 내용과 기능이 남는지 살펴보세요
웹 접근성 점검을 데스크톱 기본 배율에서만 끝내지 마세요. 브라우저 화면 확대와 작은 화면을 사용해 본문이 겹치거나 잘리지 않는지 살펴봅니다. 화면 확대 뒤에 글자 크기만 커지고 줄이 화면 밖으로 길게 이어진다면 읽을 때 좌우 이동이 반복될 수 있습니다. 문의 버튼이나 메뉴가 고정 영역에 가려지는지도 확인할 항목입니다.
W3C의 재배치 안내는 내용을 확대했을 때 정보와 기능을 잃지 않고 읽을 수 있도록 구성하는 취지를 설명합니다. 지도나 데이터 표처럼 의미상 두 방향 배치가 필요한 콘텐츠에는 예외가 있으므로 모든 영역을 같은 방식으로 판단하지는 않습니다. 우선 일반 본문, 서비스 설명, 문의 양식부터 확인하고 문제가 생기는 화면 크기와 배율을 기록하세요. 휴대전화에서 보기 좋다는 사실만으로 확대 환경까지 확인됐다고 보기는 어렵습니다.
근거 자료: W3C WAI — 확대와 콘텐츠 재배치
7. 자동 검사 결과에 직접 사용한 기록을 더하세요
웹 접근성 점검 도구는 반복되는 문제 후보를 찾는 데 도움이 되지만 결과만으로 전체 적합성을 확정할 수는 없습니다. W3C도 도구 하나만으로 사이트가 접근성 기준을 충족하는지 결정할 수 없으며 사람의 평가가 필요하다고 설명합니다. 자동 검사에서 오류가 없더라도 설명이 맥락에 맞는지, 주요 행동을 끝까지 수행할 수 있는지는 직접 확인해야 합니다.
검수 기록에는 페이지 주소, 사용 기기와 브라우저, 발견한 현상, 예상한 동작, 수정 담당자를 남겨보세요. 수정 후에는 같은 경로를 다시 확인하고 공통 메뉴를 고쳤다면 다른 페이지에도 영향이 없는지 살펴봅니다. 이 글의 항목은 운영자가 시작할 수 있는 기초 확인 범위이며 전체 기준을 평가하거나 인증을 대신하지 않습니다. 전문 평가가 필요하다면 적용할 기준과 대상 페이지, 기능 범위를 먼저 정해 별도로 진행하세요.
근거 자료: W3C WAI — 접근성 평가 개요
제작 문의 전에 준비할 것
처음부터 모든 화면을 동시에 살피기 어렵다면 메인, 주요 서비스 소개, 문의 페이지를 하나의 경로로 묶어 시작하세요. 개선을 문의할 때에는 현재 사이트 주소와 문제가 재현되는 조건, 방문자가 완료해야 할 일을 함께 알려주시면 좋습니다. Gnosislab design은 이런 정보를 바탕으로 디자인과 기능의 수정 범위를 구체화합니다. 콘텐츠를 새로 올리거나 기능을 바꾼 뒤에도 같은 항목을 반복해서 확인할 수 있도록 운영 기록을 남겨보세요.