웹 사이트를 만들거나 블로그 글을 올릴 때 "접근성"이 머릿속에 잘 안 떠오르는 경우가 많다.
특히 비장애인 기준으로만 테스트하면 시각장애인이나 고령자가 실제로 어떻게 쓰는지 감이 잘 안 온다.
결론부터 말하면,
한국형 웹 콘텐츠 접근성 지침 2.2(KWCAG 2.2, KS X OT0003:2022)를 기준으로 4원칙 14지침 33검사항목을 챙기면 대부분의 문제를 줄일 수 있다.
이 글에서는 공식 표준과 콘텐츠 제작기법을 바탕으로, 실제로 콘텐츠를 만들 때 바로 적용할 수 있는 핵심만 정리해 봤다.
(2026.08 기준, KWCAG 2.2 및 관련 제작기법 문서 참고)
1. 웹 접근성이 왜 중요한가
웹 접근성은 장애인·고령자 등이 비장애인과 동등하게 웹 콘텐츠를 인식하고, 운용하고, 이해할 수 있도록 하는 것이다. 단순히 "배려" 차원이 아니라, 『지능정보화기본법』, 『장애인 차별금지 및 권리구제 등에 관한 법률』에 따라 공공기관과 일정 규모 사업자는 의무적으로 준수해야 하는 영역이다.
실제로 도움이 되는 상황 예시:
- 야외나 밝은 환경에서 화면 반사로 텍스트가 안 보일 때 → 충분한 명도 대비
- 이어폰 없이 조용히 영상을 봐야 할 때 → 자막·대본
- 화면낭독프로그램으로 글을 들을 때 → 대체 텍스트와 논리적인 헤딩 구조
- 키보드만으로 사이트를 써야 할 때 → 초점 이동과 키보드 조작 가능
KWCAG 2.2는 W3C WCAG 2.1을 기반으로 하되, 국내 현실에 맞게 필수 항목 위주로 정리된 표준이다. 2022년 12월 28일 개정되었고, 2025년 1월부터 웹 접근성 품질인증 심사 기준으로도 활용되고 있다.
2. KWCAG 2.2의 4가지 원칙
표준은 원칙 → 지침 → 검사항목 3단계 구조다. 원칙 4개, 지침 14개, 검사항목 33개다.
2.1 인식의 용이성 (Perceivable)
사용자가 장애 유무와 관계없이 콘텐츠를 동등하게 인식할 수 있어야 한다.
주요 검사항목:
- 대체 텍스트: 이미지·아이콘·차트 등 텍스트 아닌 콘텐츠에 의미나 용도를 알 수 있는 대체 텍스트를 제공한다. "이미지", "버튼" 같은 불필요한 단어는 빼고, 짧고 명확하게 쓴다. 장식용 이미지는 alt=""로 처리한다.
- 자막·대본·수어: 영상·음성 콘텐츠에는 동등한 내용의 자막, 대본 또는 수어를 제공한다. 가장 좋은 건 폐쇄자막을 동기화하는 것.
- 표의 구성: 데이터 표는 제목 셀(th)과 데이터 셀을 구분하고, 표 제목(caption)을 넣는다.
- 콘텐츠의 선형구조: 스타일 시트를 제거해도 논리적인 순서로 읽히도록 마크업한다.
- 색에 무관한 인식: 색만으로 정보를 전달하지 않는다. 무늬나 텍스트를 함께 쓴다.
- 자동 재생 금지: 3초 이상 소리가 자동으로 재생되면 안 된다. 제어 수단을 제공한다.
- 명도 대비: 텍스트와 배경 명도 대비 4.5:1 이상 (큰 글씨·굵은 글씨는 3:1까지 완화 가능).
콘텐츠를 만들 때 바로 적용할 팁:
- 블로그 이미지에는 항상 의미 있는 alt를 달자. "스크린샷"이 아니라 "n8n 워크플로우 설정 화면"처럼 구체적으로.
- "빨간 박스 부분을 클릭하세요" 대신 "빨간 박스로 표시한 [설정] 버튼을 클릭하세요"처럼 텍스트로도 같은 정보를 준다.
2.2 운용의 용이성 (Operable)
모든 기능을 장애 유무와 관계없이 운용할 수 있어야 한다.
주요 검사항목:
- 키보드 사용 보장: 마우스 없이도 모든 기능을 키보드만으로 사용할 수 있어야 한다. (일부 위치 기반·센서 기반 콘텐츠는 예외 가능)
- 초점 이동과 표시: 초점이 논리적으로 이동하고, 시각적으로 구별 가능해야 한다.
- 조작 가능: 컨트롤 크기를 충분히 크게 (터치 기기 고려 시 최소 9mm 권장 등)
- 응답시간 조절: 시간 제한이 있으면 연장하거나 해제할 수 있어야 한다.
- 정지 기능: 자동으로 바뀌는 콘텐츠(배너, 슬라이드 등)는 일시정지·정지·앞으로/뒤로 이동이 가능해야 한다.
- 깜빡임 제한: 초당 3~50회 깜빡이는 콘텐츠는 피한다. 불가피하면 사전 경고와 회피 수단을 제공한다.
- 반복 영역 건너뛰기: 메뉴 등 반복 영역을 건너뛸 수 있는 링크를 제공한다.
- 적절한 제목·링크 텍스트: 페이지 제목, 프레임 제목, 링크 텍스트는 목적지를 명확히 알 수 있게 쓴다. "여기 클릭" 금지.
- 단일 포인터 입력 지원 등 (2.2에서 새로 강화된 항목들): 다중 터치나 경로 기반 동작은 단일 포인터로도 가능하게 한다.
실무 팁:
- 티스토리 글에서도 헤딩을 H2 → H3 순서로 건너뛰지 말자. 스크린리더 사용자가 헤딩으로 글을 훑는다.
- 링크 텍스트는 "이전 글 참고"가 아니라 "n8n 422 에러 해결 글에서 자세히 다뤘다"처럼 목적지를 드러낸다.
2.3 이해의 용이성 (Understandable)
콘텐츠를 이해할 수 있도록 제공해야 한다.
주요 검사항목:
- 기본 언어 표시: <html lang="ko">처럼 페이지 기본 언어를 명시한다.
- 예측 가능성: 사용자가 의도하지 않은 화면 전환·팝업·포커스 이동이 일어나면 미리 알리거나 이해할 수 있게 한다.
- 입력 도움: 입력 오류가 났을 때 오류 내용을 알려주고, 정정할 수 있는 방법을 제공한다. 레이블과 입력 필드를 명확히 연결한다.
- 일관성: 비슷한 기능의 컨트롤은 같은 모양·위치로 배치한다.
2.4 견고성 (Robust)
기술에 관계없이 보조기술로도 이용할 수 있어야 한다.
주요 검사항목:
- 마크업 오류 방지: 열고 닫는 태그, 중첩, 속성 선언에 오류가 없어야 한다. id 값 중복 금지.
- 웹 애플리케이션 접근성: 커스텀 컴포넌트를 쓸 때도 보조기술(스크린리더 등)과 호환되도록 한다. 가능하면 기본 UI 컴포넌트를 쓰고, ARIA 속성을 적절히 활용한다.
3. 콘텐츠 만들 때 바로 적용하는 체크리스트
공식 제작기법 문서를 기준으로, 블로그·일반 웹 콘텐츠를 만들 때 자주 놓치는 부분만 골라 정리했다.
- 이미지·아이콘
- 의미 있는 이미지 → 짧고 명확한 alt
- 장식용 → alt=""
- 버튼/링크 이미지 → 기능 중심 텍스트 (예: "검색")
- 표
- <caption>으로 표 제목
- 머리글 셀은 <th scope="col"> 또는 scope="row"
- 복잡한 표는 텍스트 설명이나 간단한 요약도 함께
- 헤딩·구조
- H1은 페이지 제목용, 본문은 H2부터
- 헤딩 레벨을 건너뛰지 않는다
- 목록은 의미에 맞게 <ul>/<ol> 사용
- 색·대비
- 정보 전달에 색만 쓰지 않는다
- 텍스트 대비 4.5:1 이상 확인 (브라우저 개발자 도구나 대비 검사 도구 활용)
- 멀티미디어
- 영상은 자막 또는 대본 제공
- 자동 재생 소리 금지 (3초 미만 예외)
- 키보드·포커스
- Tab으로 모든 기능에 접근 가능한지 확인
- 포커스가 보이는지 확인
- 언어·링크
- 페이지 언어 명시
- 링크 텍스트가 목적지와 목적을 드러내는지 확인
이 정도만 지켜도 스크린리더 사용자, 저시력 사용자, 키보드만 쓰는 사용자에게 훨씬 나은 경험을 줄 수 있다.
4. 모바일 애플리케이션 접근성도 챙기자
웹과 별도로 모바일 애플리케이션 콘텐츠 접근성 지침 2.0(KS X 3253:2016)이 있다. 원칙은 비슷하지만 터치 기반, 초점, 누르기 동작, 컨트롤 크기(권장 9mm 이상) 등이 더 강조된다. 앱을 만들거나 하이브리드 웹앱을 다룰 때는 이 지침도 함께 참고하는 게 좋다.
웹 접근성 품질인증은 주로 웹·모바일 웹을 대상으로 하며, 2025년 1월부터 KWCAG 2.2 기준으로 심사가 진행된다. 전문가 심사 준수율 95% 이상, 사용자 심사 과업 성공률 100% 등이 합격 기준이다.
5. 마무리 — 핵심 요약과 다음 단계
- 웹 접근성은 4원칙(인식·운용·이해·견고)으로 구성되고, KWCAG 2.2는 33개 검사항목으로 구체화되어 있다.
- 콘텐츠를 만들 때는 대체 텍스트, 헤딩 위계, 명도 대비, 키보드 접근, 명확한 링크 텍스트부터 챙기자.
- 색만으로 정보를 전달하지 말고, 자동 재생 소리와 과도한 깜빡임은 피한다.
- 공식 문서를 기준으로 체크리스트를 만들어 두고, 실제 스크린리더(VoiceOver, TalkBack 등)로 한 번 읽어보면 감이 확 온다.
다음 단계로는 실제로 만들고 있는 사이트나 블로그에 위 체크리스트를 적용해 보고, 문제가 되는 부분을 하나씩 고치는 걸 추천한다. 공식 표준 원문과 NIA의 「웹 접근성을 고려한 콘텐츠 제작기법 2.2」를 함께 보면 더 구체적인 코드 예시와 사례를 확인할 수 있다.
웹 접근성은 "완벽한 사이트"를 한 번에 만드는 게 아니라, 조금씩 놓친 부분을 줄여가는 과정이다. 이 글이 그 시작점이 되었으면 한다.
'IT > Tech' 카테고리의 다른 글
| 메타(페이스북, 인스타그램) 사칭 피싱 DM 구별법 9가지와 대처 방법 (1) | 2026.07.23 |
|---|---|
| KRDS란? 정부 디지털 서비스 UI/UX 가이드라인 정리 (0) | 2026.07.18 |
| 리얼포스 키보드 청소 방법 - 키캡 세척과 본체 관리 총정리 (0) | 2026.07.17 |
| 마누스 AI 안드로이드 대란 총정리, 지금 무료로 시작하는 방법 (0) | 2026.07.11 |
| 클라우드플레어(cloudflare) 페이지에 내 도메인 연결하는 방법 (0) | 2026.07.08 |
