Web Guide웹 접근성KWCAG접근성 지침
웹 접근성 지침(KWCAG) 핵심 항목
접근성은 소수를 위한 추가 기능이 아니라, 잘 만든 웹의 기본입니다.
지키면 모두에게 편해지고, 검색엔진도 더 잘 읽습니다.
01네 가지 원칙
웹 접근성 지침은 네 가지 큰 원칙 아래 세부 항목이 있습니다. 원칙만 이해해도 무엇을 확인해야 할지 감이 잡힙니다.
전문 용어처럼 보이지만 내용은 상식적입니다.
인식의 용이성 — 볼 수 있고 들을 수 있는가
대체 텍스트, 자막, 명도 대비
운용의 용이성 — 조작할 수 있는가
키보드 접근, 충분한 시간, 발작 유발 방지
이해의 용이성 — 알 수 있는가
명확한 문구, 일관된 구조, 오류 안내
견고성 — 다양한 환경에서 동작하는가
표준 마크업, 보조기기 호환
02가장 자주 지적되는 항목
실제 점검에서 자주 걸리는 항목은 정해져 있습니다. 이것만 챙겨도 상당 부분 개선됩니다.
대부분 설계 단계에서 반영하면 추가 비용이 거의 들지 않습니다.
1
대체 텍스트
모든 이미지에 무엇인지 설명하는 텍스트. 가장 기본입니다.
2
키보드 접근
마우스 없이 모든 기능을 쓸 수 있어야 합니다.
3
명도 대비
배경과 글자의 밝기 차이가 기준을 충족해야 합니다.
4
폼 라벨
입력칸과 라벨이 연결되어 있어야 합니다.
5
표 제목 셀
표의 제목 행·열이 지정되어 있어야 합니다.
6
제목 구조
제목 태그가 순서대로 쓰여야 합니다.
7
색 의존 금지
색만으로 정보를 구분하지 않아야 합니다.
8
자막
동영상에 자막을 제공해야 합니다.
03대체 텍스트 쓰는 법
가장 많이 나오는 항목이면서 가장 잘못 쓰이는 항목입니다. '이미지'나 '사진1' 같은 텍스트는 의미가 없습니다.
그 이미지가 전달하는 내용을 적어야 합니다. 장식용 이미지는 오히려 비워 두는 것이 맞습니다.
잘못된 대체 텍스트
'이미지' · '사진1' · 'img_001' · 파일명 그대로 · 아무 의미도 전달하지 않습니다
제대로 된 대체 텍스트
'공장 내부에서 설비를 점검하는 작업자' · 내용을 전달 · 장식용이라면 빈 값으로 두어 읽지 않게 합니다
04설계 단계에 반영한다
개발이 끝난 뒤에 접근성을 맞추려면 화면을 다시 만들어야 하는 경우가 생깁니다. 기획과 디자인 단계에서 반영하면 거의 무료입니다.
특히 색 대비와 폼 구조는 디자인 단계에서 정해집니다.
기획 단계화면설계서에 대체 텍스트와 접근성 요구사항을 적습니다.
디자인 단계명도 대비 확인, 폼 라벨 배치, 색 의존 제거.
퍼블리싱 단계표준 마크업, 제목 구조, 키보드 순서.
검수 단계키보드만으로 조작해 보고, 검사 도구로 점검합니다.
운영 단계새 콘텐츠를 올릴 때도 대체 텍스트를 넣게 안내합니다.
CHECK POINT
□ 모든 이미지에 의미 있는 대체 텍스트가 있는가
□ 마우스 없이 키보드만으로 모든 기능을 쓸 수 있는가
□ 명도 대비가 기준을 충족하는가
□ 폼의 입력칸과 라벨이 연결되어 있는가
□ 표의 제목 셀이 지정되어 있는가
□ 색만으로 정보를 구분하지 않는가
□ 동영상에 자막이 있는가
□ 관리자에서 콘텐츠를 올릴 때 대체 텍스트를 입력하게 하는가
#웹 접근성#KWCAG#접근성 지침#대체 텍스트#키보드 접근#명도 대비#폼 라벨#홈페이지 디자인#웹비스타#홈페이지 제작