이미지는 누르는 게 아니다

KRDS CP-207 — 이미지에 키보드 초점이 접근하지 않아야 하며, 마우스 클릭에 반응하지 않게 구현하고 있다.

0. 들어가며 — 이미지 그룹의 마지막

이번 327편은 이미지 그룹(CP-202~207, 6개)의 마지막 규칙입니다. 이미지에 키보드 초점이 접근하지 않고, 마우스 클릭에 반응하지 않게 구현하라는 내용이죠.

이미지는 ‘보는 정보’이지 ’누르는 컨트롤’이 아닙니다(특별히 링크·버튼 안의 이미지가 아닌 한). 그런데 이미지에 불필요하게 키보드 초점이 가거나 클릭 이벤트가 붙어 있으면 — 키보드 사용자가 ’왜 여기 초점이 오지?’ 헷갈리고, 클릭해도 아무 반응이 없어 혼란스럽죠. CP-207은 순수 이미지의 비대화형 처리를 규정하며 이미지 6개를 마무리 합니다. 배지 CP-187과 같은 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 키보드 초점 미접근·클릭 무반응

CP-207 (컴포넌트 > 이미지) “이미지에 키보드 초점이 접근하지 않아야 하며, 마우스 클릭에 반응하지 않게 구현하고 있다.”

(링크·버튼 안의 이미지가 아닌) 순수 표시용 이미지에는 키보드 초점이 가지 않게 하고, 클릭 이벤트도 붙이지 않아 누르는 대상으로 오인되지 않게 하라는 뜻입니다.

정리: 순수 이미지는 키보드 초점·클릭 반응 없이 비대화형으로 구현하라. 이게 CP-207입니다.

2. 왜 비대화형이어야 하나

이미지의 본질은 ’시각 정보를 보여주는 것’입니다 — 보는 것이지 조작하는 게 아니죠. 순수 표시용 이미지(사진, 차트, 다이어그램 등)는 사용자가 클릭하거나 키보드로 조작할 대상이 아닙니다. 그래서 이런 이미지에는 인터랙티브 요소의 특성(키보드 초점, 클릭 반응)이 없어야 하죠. 배지(CP-187)에서 본 ’읽는 것 vs 누르는 것’의 구분이 이미지 에도 적용됩니다.

키보드 초점이 가면 — 혼란. 순수 이미지에 불필요하게 tabindex="0"이 붙거나 인터랙티브 요소로 잘못 마크업 되면 — 키보드 사용자가 Tab으로 이미지에 초점을 두게 됩니다. 그런데 이미지는 조작할 게 없으니, 사용자는 ‘왜 여기 초점이 멈추지? 뭘 하라는 거지?’ 하고 헷갈리죠. 인터랙티브 요소가 많은 페이지에서 순수 이미지마다 초점이 멈추면 Tab 탐색이 불필요하게 길어지고 혼란스럽습니다. 초점은 ’조작 가능한 요소’에만 가야 하죠(구조화 목록 CP-148·149 정신).

클릭에 반응하면 — 오해. 순수 이미지에 클릭 이벤트(onclick)가 붙어 있는데 명확한 동작이 없거나, 시각적 으로 ‘눌러야 할 것’처럼 보이면 — 사용자는 ’이걸 누르면 뭔가 되나?’ 오해해 클릭하죠. 반응이 없거나 엉뚱하면 혼란스럽습니다. 이미지는 클릭 대상이 아님을 분명히 해야 하죠.

그래서 CP-207은 순수 이미지를 — 키보드 초점 미접근 + 클릭 무반응으로 구현하라고 합니다. 구현:

<img>는 기본적으로 비대화형 — 일반 <img>는 기본적으로 키보드 초점을 안 받고 클릭 이벤트도 없습니다. 즉 순수 이미지를 그냥 <img alt="...">로 두면 자동으로 충족되죠. 문제는 불필요한 속성·이벤트를 추가하는 경우입니다.

불필요한 tabindex 제거 — 순수 이미지에 tabindex="0"을 주지 않기(초점받게 만들지 않기).

불필요한 클릭 이벤트 제거 — 순수 이미지에 onclick·role 등을 붙이지 않기.

예외 — 링크·버튼 안의 이미지. 이미지가 링크나 버튼의 일부라면(예: 로고를 클릭하면 홈으로, 썸네일을 클릭하면 상세로) — 그건 이미지가 대화형인 게 아니라 감싸는 링크/버튼이 대화형인 것입니다. 이 경우 링크·버튼 (<a>/<button>)이 초점·클릭을 담당하고, 그 안의 이미지는 여전히 비대화형이며 alt로 그 링크·버튼의 목적을 설명하죠(예: 로고 이미지 alt=“홈으로”). 즉 ’이미지 자체를 대화형으로 만들지 마라’이지, ’이미지를 링크에 넣지 마라’가 아닙니다. 조작은 감싸는 요소가, 이미지는 표시·설명을 담당하는 역할 분리죠.

이로써 이미지 6개 규칙(CP-202~207)이 완성됩니다 — 목적(202), 텍스트 합성 구분(203), 반응형(204), 대체 텍스트 제공·품질(205·206), 비대화형(207)까지. 이미지를 목적에 맞게, 읽히게, 가볍게, 접근 가능하게 쓰는 규칙들이죠.

정리하면 — 순수 이미지는 보는 정보이지 조작 대상이 아니므로, 키보드 초점이 가지 않고 클릭에 반응하지 않게 비대화형으로 구현해, 사용자가 ’누르는 것’으로 오인하지 않게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

키보드 초점 미접근 — 순수 이미지에 Tab 초점이 가지 않는가(불필요한 tabindex 없음).

클릭 무반응 — 순수 이미지에 불필요한 클릭 이벤트·role이 없는가.

링크/버튼 분리 — 이미지가 대화형이어야 하면 감싸는 <a>/<button>이 담당하는가.

개선 방향

순수 이미지는 <img alt="...">로 두고 불필요한 tabindex·onclick·role 제거.

클릭 동작이 필요하면 이미지를 <a>/<button>으로 감싸 그 요소가 조작 담당.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	순수 이미지 비대화형 구현·링크 분리
접근성 담당	이미지 초점·클릭 미반응 검증

기관 유형	CP-207 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (이미지 사용 시)

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 순수 이미지에 Tab 초점이 가지 않나요(불필요한 tabindex 없음)?

□ 순수 이미지에 불필요한 클릭 이벤트·role이 없나요?

□ 이미지가 대화형이어야 하면 감싸는 <a>/<button>이 담당하나요?

❓ FAQ

Q1. <img>는 원래 초점이 안 가지 않나요? 맞습니다. 기본 <img>는 비대화형입니다. 문제는 불필요하게 tabindex·onclick을 추가하는 경우죠. Q2. 로고를 클릭하면 홈으로 가는데요? 그건 이미지를 감싼 링크가 대화형인 것입니다. 이미지 자체는 비대화형, 링크가 조작을 담당하죠. Q3. 배지 CP-187과 같은 건가요? 같은 정신입니다. ’읽는/보는 것’은 비대화형, ’누르는 것’만 대화형으로 마크업합니다.

6. 마무리

CP-207의 메시지:

이미지는 누르는 게 아니다 — 순수 이미지는 키보드 초점·클릭 반응 없이 비대화형으로.

순수 이미지는 보는 정보이지 조작 대상이 아닙니다. 불필요한 초점·클릭이 붙으면 사용자가 ’누르는 것’으로 오인해 혼란스럽죠. <img>를 비대화형으로 두고, 조작이 필요하면 감싸는 링크·버튼이 담당합니다. 이로써 이미지 6개 (CP-202~207)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 캐러셀(Carousel) 로 넘어갑니다 — 19개로 가장 큰 그룹이죠.

다음 편 예고 ▶ 「328. (CP-208) 캐러셀 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 순수 이미지가 비대화형(초점·클릭 미반응)으로 구현되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 이미지(Image) 가이드 — https://www.krds.go.kr/html/site/component/component_19.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준