Lighthouse 같은 자동 검사 도구는 색 대비, 대체 텍스트가 있는지, 버튼에 이름이 있는지처럼 코드만 보고 판정할 수 있는 항목을 잡아 줍니다. 키보드만으로 사이트를 끝까지 쓸 수 있는지, 대체 텍스트가 이미지 내용을 제대로 설명하는지는 사람이 직접 확인해야 합니다. 이 글은 venox.kr을 점검하면서 실제로 고친 항목을 예로, 자동 검사와 수동 점검을 어떻게 나눠 하는지 정리합니다.
국내 홈페이지가 따르는 기준
국내 기준은 한국형 웹 콘텐츠 접근성 지침 2.2(KWCAG 2.2)입니다. 2022년 12월 국가표준(KS X OT0003:2022)이 됐고, 인식의 용이성·운용의 용이성·이해의 용이성·견고성의 4개 원칙 아래 14개 지침과 33개 검사 항목으로 이뤄져 있습니다. 국제 기준인 W3C의 WCAG를 바탕으로 개정돼 내용 대부분이 서로 대응합니다.
공식 인증인 웹 접근성 품질인증은 지정 인증기관이 사전 심사, 전문가 심사, 장애인 사용자 심사를 거쳐 주고, 유효기간은 1년입니다. 자동 검사 점수는 이 심사를 대신하지 못합니다.
자동 검사가 잡아 주는 것
아래는 2026년 11월 3일 Lighthouse 12.6으로 venox.kr 도입 문의 페이지를 검사한 결과입니다. 이 페이지에 해당하는 자동 판정 항목 25개 중 24개를 통과했고, 색 대비 1개가 기준에 못 미쳤습니다. 이와 별도로 10개 항목은 "직접 확인하라"는 목록으로 따로 나옵니다.
자동으로 판정하는 항목은 대체로 이런 것들입니다.
| 항목 | 확인하는 것 |
|---|---|
| 이미지 대체 텍스트 | img 요소에 alt 속성이 있는지 (내용이 맞는지는 판단하지 못함) |
| 버튼·링크 이름 | 아이콘만 있는 버튼에도 읽을 수 있는 이름이 있는지 |
| 입력란 라벨 | 입력란과 선택 상자마다 무엇을 넣는 칸인지 연결돼 있는지 |
| 문서 언어 | html 요소에 lang="ko"처럼 언어가 지정돼 있는지 |
| 제목 순서 | H2 다음에 H4로 건너뛰는 식으로 제목 단계가 어긋나지 않는지 |
| 색 대비 | 글자와 바탕의 명도 대비가 기준 이상인지 |
실제로 고친 것
2026년 10월 venox.kr을 점검하며 고친 항목입니다. 대부분 코드 몇 줄로 끝나는 일이었습니다.
| 문제 | 원인 | 고친 방법 |
|---|---|---|
| 모바일 메뉴 닫기 버튼에 이름이 없음 | X 아이콘만 있는 버튼 | aria-label="메뉴 닫기" |
| 뉴스레터 구독 버튼에 이름이 없음 | 화살표 아이콘만 있는 버튼 | aria-label="뉴스레터 구독" |
| 문의 유형 선택 상자에 라벨이 없음 | 화면의 제목 글자와 선택 상자가 연결되지 않음 | aria-label="문의 유형" |
| 게시글 화면에 H1이 두 개 | 페이지 제목과 글 제목이 모두 H1 | 게시글 화면에서는 페이지 제목을 H2로 |
| 구축 사례 이미지 대체 텍스트 빈칸 | 갤러리 이미지의 alt가 비어 있음 | 프로젝트 이름과 "화면 1, 2…"로 자동 작성 |
| 사진 출처 글자 대비 2.65:1 | 연회색 바탕(#f7f7f7)에 연회색 글자(#999) | 출처 글자도 캡션과 같은 색으로 (11월 3일) |
마지막 항목은 이 글을 쓰려고 다시 검사하다 찾았습니다. 사진 출처를 눈에 덜 띄게 하려고 따로 연한 색을 준 것이 화근이었습니다. 이렇게 새로 넣은 작은 요소 하나로도 점수가 내려가므로, 화면을 바꾼 뒤에는 검사를 다시 돌립니다.
고친 뒤 점검한 주요 페이지의 접근성 점수는 87~91점에서 95~96점이 됐습니다. 남은 감점은 대부분 연한 회색 보조 글자의 색 대비입니다. 색을 바꾸면 화면 인상이 달라지므로 디자인 수정과 함께 정합니다.
사람이 직접 확인해야 하는 것
수동 점검은 아래 순서로 합니다.
마우스를 치우고 Tab 키로 처음부터 끝까지 이동합니다. 모든 메뉴·버튼·입력란에 닿는지, 지금 어디에 초점이 있는지 눈에 보이는지 확인합니다.
팝업이나 전체 메뉴를 열었다가 Esc 키나 닫기 버튼으로 빠져나올 수 있는지 봅니다. 초점이 팝업 안에 갇히면 안 됩니다.
대체 텍스트를 읽어 봅니다. "이미지", "사진1", 파일 이름처럼 내용이 없는 문구는 자동 검사는 통과하지만 쓸모가 없습니다.
링크 문구만 따로 읽어도 어디로 가는지 알 수 있는지 봅니다. "여기", "더보기"가 여러 개 있으면 화면낭독기 사용자는 서로 구분하지 못합니다.
영상에는 자막을 붙이고, 소리 없이 화면으로만 내용을 전하는 영상에는 설명을 붙입니다.
첨부 문서(PDF·HWP)를 열어 봅니다. 글자가 아니라 스캔 이미지로만 된 PDF는 화면낭독기가 읽지 못합니다.
화면을 200%로 키우고, 휴대폰을 가로로 돌렸을 때 글자가 잘리거나 겹치지 않는지 봅니다.
CMS가 맡는 것, 글 쓰는 사람이 맡는 것
VENOX CMS가 처리
모든 페이지에 문서 언어(lang="ko") 지정
게시글 화면의 H1은 글 제목 하나
본문 편집기의 이미지 도구에서 대체 텍스트와 캡션 입력
구축 사례 이미지는 프로젝트 이름으로 대체 텍스트 작성
아이콘만 있는 버튼에 이름(aria-label)
담당자가 챙길 것
이미지를 올릴 때 사진에 보이는 내용을 한 문장으로 대체 텍스트에
글자가 들어간 이미지(포스터, 안내문)는 같은 내용을 본문에도
표는 첫 행을 제목 행으로
첨부 파일은 글자가 살아 있는 PDF로
색으로만 구분하지 않기 — "빨간 글씨는 필수" 대신 "(필수)" 표시
자주 묻는 질문
Lighthouse 100점이면 인증을 받을 수 있나요?
아닙니다. 자동 검사는 코드로 판정할 수 있는 일부 항목만 봅니다. 인증 심사에서는 전문가와 장애인 사용자가 직접 사이트를 써 보며 검사 항목을 하나씩 확인합니다.
접근성 작업은 언제 하는 게 좋나요?
디자인 단계가 가장 쉽습니다. 색 대비와 초점 표시는 디자인을 정할 때 함께 정하면 나중에 화면을 다시 고칠 일이 줄어듭니다.
이미 운영 중인 사이트는 어디부터 고치나요?
자동 검사로 쉽게 고칠 수 있는 것(버튼 이름, 대체 텍스트, 입력란 라벨)부터 고치고, 키보드 점검을 한 다음, 색 대비처럼 디자인이 바뀌는 항목을 정리하는 순서가 부담이 적습니다. venox.kr도 이 순서로 했습니다.
참고: KWCAG 2.2 구성과 품질인증 절차는 기업마당 웹접근성 정책 안내와 지자체 웹 접근성 안내 페이지를 기준으로 정리했습니다. 세부 기준은 인증기관 공지를 확인하세요.
관련 글: 검색엔진과 AI가 읽는 파일 · VENOX CMS 구조 해설 · 도입 문의