웹 접근성, 홈페이지에서 먼저 고칠 열 가지
한국형 웹 콘텐츠 접근성 지침 2.2의 33개 검사항목 가운데 홈페이지에서 먼저 고칠 열 가지를 고르고, 무료 도구로 확인하는 순서와 2026년 1월 시행된 디지털포용법의 품질인증 절차를 정리했습니다.
웹 접근성은 장애인 · 고령자도 다른 사람과 동등하게 홈페이지의 정보를 읽고 기능을 쓸 수 있게 만드는 일입니다. 국내 기준은 국가표준인 한국형 웹 콘텐츠 접근성 지침 2.2(KWCAG 2.2)이고, 4개 원칙 · 14개 지침 · 33개 검사항목으로 되어 있습니다. 33개를 한 번에 보기보다 머리 메뉴 · 하단 · 문의 폼처럼 여러 페이지에 함께 걸린 영역과 첫 화면에서 열 가지를 먼저 고치고, 키보드와 무료 도구로 확인합니다. 운영하는 사이트가 법적 의무 대상인지는 이 글에서 단정하지 않습니다.
웹 접근성은 누구에게 적용되나요
근거는 장애인차별금지법 제21조입니다. 법에 적힌 행위자가 만들고 배포하는 전자정보에 장애인이 장애인 아닌 사람과 동등하게 접근 · 이용할 수 있도록 필요한 수단을 제공하게 하고, 시행령 제14조는 그 수단의 첫 줄로 신체적 · 기술적 여건과 관계없이 원하는 서비스를 이용할 수 있게 접근성을 갖춘 웹사이트를 듭니다.
적용 시기는 시행령 별표 3이 행위자별로 나눠 둡니다. 공공기관은 2009년 4월 11일부터, 의료기관 가운데 종합병원은 2009년 · 병원급은 2011년 · 그 밖의 의료기관은 2013년 4월 11일부터이고, 법 제3조 제8호에 따른 법인은 다른 별표가 정한 경우 외에는 2013년 4월 11일부터로 적혀 있습니다. 운영하는 사이트가 어느 줄에 드는지는 법 제3조의 정의와 함께 봐야 하므로, 의무 여부가 쟁점이면 전문가에게 확인합니다.
무엇을 갖추면 되는지는 한국형 웹 콘텐츠 접근성 지침 2.2(KS X OT0003)가 정합니다. 2022년 12월 28일 개정된 국가표준으로, 인식의 용이성 · 운용의 용이성 · 이해의 용이성 · 견고성 네 원칙 아래 검사항목을 둡니다. 스마트폰 앱은 모바일 애플리케이션 콘텐츠 접근성 지침(KS X 3253)을 따로 봅니다.
홈페이지에서 먼저 고칠 열 가지는 무엇인가요
공통 영역과 첫 화면에서 드러나는 항목을 먼저 골랐습니다. 머리 메뉴 · 하단 · 문의 폼은 한 번 고치면 여러 페이지가 함께 고쳐집니다. 괄호 안은 지침의 항목 번호입니다.
| 항목 | 이런 모습이면 | 이렇게 고칩니다 |
|---|---|---|
| 1. 대체 텍스트(5.1.1) | 글이 든 배너 이미지의 대체 텍스트가 비었거나 파일 이름 | 이미지 속 글을 그대로 적고, 꾸밈용 이미지는 빈 값(alt="") |
| 2. 자막(5.2.1) | 소개 영상에 자막 · 대본이 없음 | 자막 파일이나 대본을 붙이고, 3초 이상 자동으로 나는 소리는 페이지 맨 위에 멈춤 단추를 둠(5.4.2) |
| 3. 색에 무관한 인식(5.4.1) | 필수 입력칸을 빨간 글자로만 구분 | 「필수」 글자나 * 기호를 함께 |
| 4. 명도 대비(5.4.3) | 흰 바탕의 연한 회색 글, 사진 위 흰 글 | 4.5:1 이상, 18pt(24px) 이상이나 굵은 14pt(약 18.7px) 이상 글자는 3:1 이상 |
| 5. 키보드 사용(6.1.1) | 마우스를 올려야 열리는 메뉴, 키보드로 안 닫히는 팝업 | Tab · Enter · Esc로 열고 닫히게 |
| 6. 초점 이동과 표시(6.1.2) | Tab을 눌러도 지금 위치가 안 보임 | 초점 테두리를 지우지 않고, 이동 순서를 화면 순서와 맞춤 |
| 7. 반복 영역 건너뛰기(6.4.1) | 페이지마다 메뉴를 다 지나야 본문에 닿음 | 맨 위에 「본문 바로가기」 링크, 초점을 받으면 보이게 |
| 8. 제목(6.4.2) | 모든 페이지의 제목이 같거나, 소제목을 굵은 글씨로만 표시 | 페이지마다 다른 제목, 소제목은 제목 태그(h2 · h3)로 |
| 9. 링크 텍스트(6.4.3) | 「자세히 보기」만 여러 개 | 「서비스 안내 자세히 보기」처럼 목적을 넣음 |
| 10. 레이블(7.3.2) | 입력칸 안의 흐린 안내 글만 있음 | 입력칸마다 label을 연결(for와 id) |
명도 대비의 18pt · 14pt는 인증 심사 지침이 Windows 기준 24px · 18.66px로 적용하는 값입니다. 로고, 꾸밈용 글자, 선택할 수 없게 흐리게 처리한 단추는 명도 대비 항목에서 빠지지만, 브랜드 색으로 쓴 글자와 입력칸 안 글자는 들어갑니다. 본문 글자 크기는 홈페이지 글자 크기와 줄 간격 기준의 16~18px을 그대로 씁니다.
코드 한 줄로 끝나는 기본 언어 표시(7.1.1, html 태그의 lang="ko")도 함께 넣습니다. 폰에서 누르는 단추는 지침이 대각선 6.0mm 이상을 바람직한 크기로 적고 있고(6.1.3), 좁은 폭에서 화면이 밀리는지는 모바일에서만 화면이 깨질 때 원인 찾기의 순서로 봅니다. 영상 자막 파일은 자막 파일 형식 — SRT 규격과 넣는 방법의 규격을 씁니다.
무료 도구로는 어떤 순서로 확인하나요
도구는 판단을 돕는 데까지입니다. W3C 웹 접근성 이니셔티브(WAI)도 도구가 모든 항목을 자동으로 확인하지 못하고 사람의 판단이 필요하다고 안내합니다. 그래서 키보드 → 자동 검사 → 대비 측정 → 화면 낭독 순서로 봅니다.
- 키보드로 걷기 — 마우스를 치우고 Tab · Shift+Tab · Enter · Esc만으로 첫 화면에서 문의 폼 제출까지 갑니다. 초점이 사라지는 곳과 갇히는 곳을 적습니다.
- Lighthouse — 크롬 개발자 도구의 Lighthouse 탭에서 접근성 항목을 돌립니다. 구글이 만든 오픈소스 자동 검사 도구입니다.
- WAVE — WebAIM이 제공하는 검사 도구로, 주소를 넣는 온라인판과 크롬 · 파이어폭스 · 엣지 확장 프로그램이 있습니다. 빠진 대체 텍스트와 레이블이 화면 위에 표시됩니다.
- Colour Contrast Analyser(CCA) — 화면의 두 색을 찍어 대비 값을 재는 무료 프로그램(Windows · macOS)입니다. 인증 심사 지침도 명도 대비를 CCA 등의 도구로 보이는 화면에서 측정한다고 적고 있습니다.
- 화면 낭독 — 운영체제에 들어 있는 화면 낭독 기능(Windows 내레이터 · macOS VoiceOver)으로 첫 화면을 한 번 듣습니다. 이미지와 단추가 무엇이라고 읽히는지 적습니다.
결과는 페이지 주소 · 항목 번호 · 화면 캡처 세 칸으로 적고, 공통 영역에서 나온 것부터 고칩니다.
품질인증은 어떤 절차로 받나요
2026년 1월 22일 시행된 디지털포용법은 웹사이트 등에 대한 접근성 품질인증을 정합니다(제21조 · 제22조). 인증을 받으려는 쪽이 과학기술정보통신부가 지정한 인증기관에 신청하는 방식입니다.
| 단계 | 하는 일 | 근거 |
|---|---|---|
| 1. 자체 점검 | 33개 검사항목으로 스스로 점검하고 고침 | 한국형 웹 콘텐츠 접근성 지침 2.2 |
| 2. 신청 | 신청서와 인증 기준 충족을 증명하는 서류를 인증기관에 제출 | 시행령 제20조 제1항 |
| 3. 심사 | 인증기관이 서면 · 기술 심사를 함. 한 인증기관 안내 기준으로 전문가 심사(33개 항목 준수율 95% 이상)와 장애인 사용자 심사를 함께 봄 | 시행령 제20조 제2항 · 인증기관 안내 |
| 4. 표시 | 정해진 도안으로 표시하고, 홍보할 때는 인증 범위와 유효기간을 함께 밝힘 | 시행령 제23조 |
| 5. 갱신 | 유효기간은 인증을 받은 날부터 1년 | 시행령 제21조 |
인증을 받지 않은 곳이 인증 표시나 이와 비슷한 표시를 쓰는 것은 금지됩니다(법 제22조 제3항). 수수료는 인증기관이 과학기술정보통신부 고시 기준에 따라 받으므로(시행령 제22조), 지정 인증기관 목록과 함께 신청하는 날 확인합니다.
자주 묻는 질문
웹 접근성 인증은 꼭 받아야 하나요?
인증은 받으려는 쪽이 인증기관에 신청하는 제도입니다(디지털포용법 제22조 제1항). 접근성을 갖추는 일과 인증 마크를 받는 일은 따로 봅니다. 입찰이나 사업 참여에 쓸 계획이라면 해당 공고가 요구하는 인증 조건부터 확인하고, 신청부터 인증까지 걸리는 날짜를 일정에 넣습니다.
자동 검사에서 오류가 0개면 끝인가요?
아닙니다. W3C WAI는 평가 도구가 접근성을 판정하지 못하고 판단을 도울 뿐이라고 안내합니다. 대체 텍스트가 있는지는 도구가 찾아도, 그 내용이 이미지와 같은 뜻인지는 사람이 읽어야 압니다. 키보드로 걷기와 화면 낭독 듣기를 함께 합니다.
모바일 앱도 같은 기준인가요?
앱은 별도 국가표준인 모바일 애플리케이션 콘텐츠 접근성 지침(KS X 3253)을 봅니다. 장애인차별금지법 제21조 제2항도 스마트폰 등에 설치되는 응용 소프트웨어의 접근성을 따로 정하고, 적용 시기는 시행령 별표 3의2에 있습니다. 폰 브라우저로 보는 모바일 웹은 이 글의 KWCAG 2.2 기준을 그대로 씁니다.
글자 크기 기준도 있나요?
지침의 명도 대비 항목은 글자 크기에 따라 기준을 나눕니다 — 보통 글자는 4.5:1, 18pt 이상이나 굵은 14pt 이상은 3:1이고, 화면 확대가 가능하게 만든 콘텐츠는 3:1까지 낮출 수 있다고 적혀 있습니다. 읽기 편한 크기는 본문 16~18px, 줄 간격은 글자 크기의 1.6~1.8배를 기준으로 잡습니다.
오늘 할 일
마우스를 치우고 Tab 키만으로 첫 화면에서 문의 폼 제출까지 가 보십시오. 초점이 보이지 않는 곳과 더 나아가지 못하는 곳을 페이지 주소와 함께 적으면, 그 목록이 웹 접근성 열 가지 가운데 먼저 고칠 줄입니다.
이어서 읽기 — 동영상 자막 넣기, PC·폰 무료 방법과 검수표
