기업 홈페이지 웹 접근성 체크리스트: 키보드·대체텍스트·폼 오류부터 점검하기

작성: IILL Editorial · 접근성 인증이나 법적 의무 여부는 대상 기관의 최신 기준으로 별도 확인하세요.

웹 접근성은 자동 점수 하나로 끝나는 작업이 아닙니다. 마우스를 쓰지 않는 사람이 메뉴를 열 수 있는지, 화면을 확대해도 내용이 잘리지 않는지, 오류가 난 폼에서 무엇을 고쳐야 하는지 직접 확인해야 합니다. 이 글은 일반 홈페이지 공개 전 QA 절차를 다루며, 특정 기관의 법적 의무나 접근성 인증을 판단하는 법률 자문이 아닙니다.

기준을 네 가지 질문으로 바꾸기

WCAG 2.2의 네 원칙을 실제 확인 질문으로 바꾸면 팀이 같은 화면을 보며 수정하기 쉬워집니다.

원칙	공개 전 질문	확인 예시
인식 가능	이미지·영상·색만으로 중요한 정보를 전달하지 않나요?	대체텍스트, 자막, 명도 대비
운용 가능	키보드와 보조기술로 모든 핵심 기능을 쓸 수 있나요?	초점 순서, 건너뛰기, 메뉴·모달
이해 가능	라벨과 오류 메시지가 다음 행동을 알려주나요?	폼 label, 입력 형식, 오류 위치
견고함	다양한 브라우저와 보조기술이 구조를 해석할 수 있나요?	의미 있는 HTML, 상태·이름·값

마우스를 놓고 먼저 확인하기

주소창 뒤에 커서를 두고 Tab으로 헤더, 메뉴, 본문, 푸터를 이동합니다.
현재 초점이 보이는지, 화면 밖으로 사라지지 않는지 확인합니다.
메뉴·아코디언·모달을 키보드로 열고 닫습니다.
Esc와 Enter가 기대한 동작을 하는지 확인합니다.
같은 내용을 여러 번 건너뛰어야 한다면 본문 건너뛰기 링크를 검토합니다.

초점 테두리를 없애서 디자인을 깔끔하게 보이게 만드는 것은 해결책이 아닙니다. 브랜드에 맞는 초점 스타일을 설계하되, 현재 위치와 다음 행동이 분명하게 보여야 합니다.

콘텐츠와 구조 점검

장식 이미지에는 빈 대체텍스트를, 정보를 전달하는 이미지에는 목적을 설명하는 대체텍스트를 둡니다.
제목은 시각적 크기가 아니라 문서 구조에 맞춰 h1부터 순서대로 사용합니다.
링크 문구만 읽어도 목적을 알 수 있게 씁니다. “자세히 보기”만 반복하지 않습니다.
색상만으로 필수·오류·성공 상태를 구분하지 않고 텍스트나 아이콘을 함께 제공합니다.
텍스트 간격을 넓히거나 200%까지 확대해도 가로 스크롤 없이 핵심 내용을 읽을 수 있는지 봅니다.

자동 검사기는 누락된 alt나 낮은 대비를 빠르게 찾는 데 유용하지만, 대체텍스트가 실제 문맥에 맞는지와 제목 순서가 자연스러운지는 사람이 읽어야 합니다. WCAG 빠른 참조를 항목별 수정 기준으로 사용하되, 도구의 “통과”를 인증서처럼 표현하지 마세요.

폼은 오류 상태까지 완성하기

문의·예약 폼은 정상 입력만 시험하면 안 됩니다.

각 입력에 보이는 label과 필요한 형식 안내가 있다.
빈 값, 잘못된 이메일, 너무 긴 값, 서버 오류를 각각 구분한다.
오류 메시지가 입력 요소와 연결되고, 무엇을 고치면 되는지 말한다.
제출 중·성공·실패 상태를 키보드와 모바일에서 확인한다.
성공 이벤트는 실제 서버 접수 뒤에만 측정한다.

문의 내용이나 이메일을 분석 도구의 이벤트 값에 넣지 않는 원칙은 랜딩페이지 GA4 전환 가이드와 함께 검수하세요.

모바일과 보조기술의 실제 확인

좁은 화면에서는 메뉴가 초점을 가리지 않는지, 가로 스크롤이 생기지 않는지, 터치 영역이 겹치지 않는지 봅니다. 가능하면 키보드만 사용하는 브라우저 확인과 화면 낭독기를 통한 핵심 흐름 확인을 별도로 기록합니다. 한 브라우저에서만 통과한 결과를 모든 환경의 보증으로 확대하지 않습니다.

공개 전 체크리스트

홈페이지 구조와 공개 뒤 운영 범위는 홈페이지 제작 서비스와 홈페이지 유지보수 가이드에서 이어집니다. 접근성은 마지막에 붙이는 점수표가 아니라, 기획·콘텐츠·개발·QA가 같은 기준으로 반복 확인하는 운영 항목입니다.

NEXT PROJECT

홈페이지 제작, 어디서부터 정할지 막막하신가요?

현재 상황과 필요한 결과를 들은 뒤, 만들 범위와 다음 단계를 먼저 정리합니다.

프로젝트 문의하기 포트폴리오 보기