이런 상황에서 나옵니다
"접근성도 챙겨주세요" — 공공 프로젝트면 법적 의무입니다.
장애·나이·기기·환경과 관계없이 누구나 쓸 수 있게 만드는 것입니다. a11y는 accessibility의 a와 y 사이 글자가 11개라서 붙은 축약 표기입니다.
눈으로 보기 직접 눌러보세요
· 눈이 안 보이는 사람 → 스크린리더로 듣습니다
· 손이 불편한 사람 → 키보드만으로 조작합니다
· 색약인 사람 → 빨강/초록 구분이 어렵습니다
· 밝은 야외의 모든 사람 → 대비가 낮으면 안 보입니다
헷갈리는 지점접근성은 소수를 위한 배려가 아니라 모두를 위한 품질입니다. 밝은 햇빛 아래, 한 손에 짐을 든 상태, 시끄러운 지하철에서도 쓸 수 있는가 — 이게 다 접근성입니다. 그리고 공공기관·공기업 프로젝트는 법적 의무라 지키지 않으면 납품이 반려됩니다.
실무에서 쓸 때접근성은 나중에 붙이는 게 가장 비쌉니다. 구조를 다 만든 뒤 고치려면 거의 새로 만드는 수준이 됩니다. 처음부터 반영하세요.
이렇게 요청하세요
접근성을 처음부터 반영해주세요 — 시맨틱 마크업, 키보드 조작, 명도 대비 4.5:1, 이미지 대체 텍스트. 나중에 붙이면 구조를 다시 짜야 해서 훨씬 비쌉니다.
이런 상황에서 나옵니다
공공기관 입찰에서 "웹 접근성 인증마크"가 요구될 때.
국제 웹 접근성 지침입니다. A · AA · AAA 세 등급이 있고, 보통 AA를 목표로 합니다.
눈으로 보기 직접 눌러보세요
A최소 수준
AA실무 표준 · 대부분 여기
AAA최고 수준 · 전체 적용은 비현실적
헷갈리는 지점한국에는 이를 기반으로 한 KWCAG(한국형 웹 콘텐츠 접근성 지침)가 있고, 공공기관은 웹 접근성 인증마크를 요구합니다. 이런 프로젝트를 수주했다면 초반부터 반영해야 합니다 — 나중에 고치려면 거의 새로 만드는 수준이 됩니다.
이렇게 요청하세요
WCAG 2.1 AA 등급을 목표로 진행하겠습니다. 공공기관 납품이면 KWCAG 기준과 웹 접근성 인증마크 심사까지 일정에 포함해야 하니, 필요 여부를 알려주세요.
이런 상황에서 나옵니다
"이미지에 alt 넣어주세요" — 그런데 모든 이미지에 넣으면 안 됩니다.
이미지를 글로 설명한 텍스트입니다. 이미지가 안 보이거나 스크린리더를 쓸 때 대신 전달됩니다.
눈으로 보기 직접 눌러보세요
✗
alt="이미지1.jpg" / alt="사진"
✓ 정보 이미지
alt="7월 매출이 전월 대비 12% 증가한 막대그래프"
✓ 장식 이미지
alt="" (비워두면 건너뜀)
헷갈리는 지점모든 이미지에 넣는 게 아닙니다. 장식용 이미지는 오히려 비워둬야 스크린리더가 건너뜁니다. 정보를 담은 이미지에만 넣고, "이미지"·"사진" 같은 말은 빼고 내용만 씁니다. 검색 노출(SEO)에도 도움이 됩니다.
이렇게 요청하세요
정보를 담은 이미지에만 대체 텍스트를 넣고, 장식용 이미지는 alt=""로 비워서 스크린리더가 건너뛰게 해주세요. 텍스트에 "이미지", "사진" 같은 말은 넣지 말아주세요.
이런 상황에서 나옵니다
"aria 속성 넣어주세요" — 다만 안 쓰는 게 최선인 경우가 많습니다.
보조 기술에 역할·상태·속성을 알려주는 추가 표시입니다. aria-label, aria-expanded 같은 것들입니다.
눈으로 보기 직접 눌러보세요
aria-label — 화면엔 없지만 읽히는 이름
aria-expanded — 펼침/접힘 상태
aria-selected — 선택 여부
role — 이 요소의 역할
이 사이트의 카테고리 버튼과 탭에도 실제로 들어가 있습니다.
헷갈리는 지점ARIA의 첫 번째 규칙은 "ARIA를 쓰지 않는 것"입니다. 올바른 HTML 태그로 해결되면 그게 낫고, 어쩔 수 없을 때만 ARIA를 씁니다. 잘못 쓴 ARIA는 아예 안 쓴 것보다 나쁩니다.
이렇게 요청하세요
기본 HTML 태그로 해결되는 건 ARIA 없이 만들어주세요. 아이콘 버튼처럼 이름이 없는 경우에만 aria-label을 쓰고, 아코디언은 aria-expanded로 펼침 상태를 알려주세요.