링크면 링크라고 알려라

KRDS CP-265 — 링크로 작동하는 모든 요소는 스크린 리더에서 링크로 인지될 수 있도록 하고 있다.

0. 들어가며 — 링크 그룹의 마지막

이번 385편은 링크 그룹(CP-254~265, 12개)의 마지막 규칙입니다. 링크로 작동하는 모든 요소가 스크린 리더 에서 링크로 인지되게 하라는 내용이죠.

겉으로 링크처럼 보이고 클릭하면 이동하는데 — <div>에 클릭 이벤트만 붙여 만든 ’가짜 링크’면, 스크린 리더는 그것을 ’링크’로 인지 못 하죠. 비시각 사용자는 그게 클릭 가능한지조차 모릅니다. CP-265는 링크로 작동하는 요소를 스크린 리더가 ’링크’로 인지하게 마크업하라고 규정합니다. 이번 편으로 링크 12개를 마무리합니다.

1. 원문 — 링크 작동 요소 SR 링크 인지

CP-265 (컴포넌트 > 링크) “링크로 작동하는 모든 요소는 스크린 리더에서 링크로 인지될 수 있도록 하고 있다.”

클릭하면 다른 곳으로 이동하는(링크로 작동하는) 모든 요소를 <a href>나 적절한 역할로 마크업해, 스크린 리더가 ’링크’로 인지하게 하라는 뜻입니다.

정리: 링크로 작동하는 요소를 스크린 리더가 ’링크’로 인지하게 마크업하라. 이게 CP-265입니다.

2. 왜 스크린 리더가 링크로 인지해야 하나

웹 요소의 역할(role) 은 — 스크린 리더가 사용자에게 ’이게 무엇이고 어떻게 작동하는지’를 알리는 핵심입니다. 링크의 역할은 ’클릭하면 다른 곳으로 이동’이죠. 스크린 리더가 어떤 요소를 ’링크’로 인지하면 — “링크, ○○”라고 읽어, 사용자가 ’이건 클릭하면 이동하는 링크구나’를 알고 활용합니다. 또 스크린 리더의 링크 목록 탐색(링크만 모아 듣기, CP-257·262·263 맥락)에도 그 요소가 포함되죠.

가짜 링크 — 인지 실패. 그런데 링크처럼 작동하는데 링크가 아닌 요소로 만들면 — 스크린 리더가 ’링크’로 인지 못 합니다. 흔한 가짜 링크:

<div>/<span> + onclick — 클릭 시 이동하는 동작을 <div>·<span>에 JavaScript로 붙임. 시각적으론 링크처럼 보이고 마우스로 클릭되지만 — 역할이 없어 스크린 리더가 ’링크’로 안 읽고(그냥 텍스트로 읽음), 키보드 포커스도 못 받죠(CP-261 위반). 비시각·키보드 사용자는 그게 클릭 가능한지 모릅니다.

href 없는 <a> — <a>(href 없음)는 — 스크린 리더가 링크로 일관되게 인지 못 하거나 키보드 접근이 어색하죠.

올바른 마크업:

<a href="..."> (권장) — 가장 확실합니다. href가 있는 앵커는 — 스크린 리더가 자동으로 “링크”로 인지하고, 키보드 접근(CP-261)도 됩니다. 링크로 작동하는 요소는 <a href>로 만드는 게 기본이죠.

부득이 다른 요소면 role="link" — 정말 <a>를 못 쓰는 경우 role="link" + tabindex="0" + 키보드 핸들러(Enter)를 붙여야 하지만 — <a href>가 훨씬 간단·안전합니다.

링크 vs 버튼 역할 구분. 한 가지 — ’링크’와 ’버튼’은 역할이 다릅니다(디스클로저 CP-174, 모달 닫기 CP-183 에서 본 구분):

링크 — ‘다른 곳으로 이동’. <a href>, 스크린 리더 “링크”.

버튼 — ‘동작 실행’(펼침·제출·토글 등, 이동 아님). <button>, 스크린 리더 “버튼”.

이동하는 것은 링크로, 동작하는 것은 버튼으로 — 역할을 맞춰야 스크린 리더가 정확히 안내하죠. 링크를 버튼으로, 버튼을 링크로 만들면 사용자가 동작을 오해합니다. CP-265는 ‘링크로 작동하는 요소는 링크로 인지되게’이고, 그 짝으로 ’버튼으로 작동하는 요소는 버튼으로’(버튼 그룹 CP-266~)가 있죠.

이로써 링크 12개 규칙(CP-254~265)이 완성됩니다 — 시각 표현(254·255·256), 레이블 명확성(257·262·263), 실용 연결(258·259·260), 접근성(261·264·265)까지. 웹의 가장 기본 요소인 링크를, 시각·실용·접근성 모두 챙겨 만드는 규칙들이죠. CP-261(키보드 접근)·CP-265(링크 인지)가 함께 — 링크를 키보드·스크린 리더 사용자가 인지하고 쓰게 합니다.

정리하면 — 링크로 작동하는 요소는 <a href>(또는 role="link")로 마크업해 스크린 리더가 ’링크’로 인지하게 하고, 이동(링크)과 동작(버튼)의 역할을 구분해, 비시각 사용자도 링크를 인지·활용하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

링크 인지 — 링크로 작동하는 요소가 스크린 리더에 “링크”로 인지되는가.

표준 마크업 — <a href="...">로 마크업됐는가(div 클릭·href 없는 a 아님).

링크/버튼 구분 — 이동은 링크, 동작은 버튼으로 역할이 맞는가.

개선 방향

링크로 작동하는 요소를 <a href>로 마크업. 가짜 링크(div 클릭) 제거.

부득이하면 role="link"+키보드. 이동/동작에 링크/버튼 역할 일치.

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

역할	책임
퍼블리셔/개발	<a href>·역할 마크업·링크/버튼 구분
접근성 담당	스크린 리더 링크 인지 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 링크로 작동하는 요소가 스크린 리더에 “링크” 로 인지되나요?

□ <a href="...">로 마크업됐나요(div 클릭·href 없는 a 아님)?

□ 이동은 링크, 동작은 버튼으로 역할이 맞나요?

❓ FAQ

Q1. <div onclick>으로 링크를 만들면 안 되나요? 역할이 없어 스크린 리더가 ‘링크’로 인지 못 하고 키보드 접근도 안 됩니다. <a href>를 쓰세요. Q2. 링크와 버튼은 같은 거 아닌가요? 다릅니다. 링크는 ’이동’, 버튼은 ’동작 실행’입니다. 역할을 맞춰야 스크린 리더가 정확히 안내하죠. Q3. role="link"만 주면 되나요? <a href>가 훨씬 간단·안전합니다. role="link"는 tabindex·키보드 핸들러도 직접 구현해야 하죠.

6. 마무리

CP-265의 메시지:

링크면 링크라고 알려라 — 링크로 작동하는 요소를 스크린 리더가 ’링크’로 인지하게.

링크처럼 작동하는데 <div> 클릭으로 만든 가짜 링크는 스크린 리더가 ’링크’로 인지 못 합니다. <a href>로 마크업해 ’링크’로 인지되게 하고, 이동(링크)과 동작(버튼)의 역할을 구분하죠. 이로써 링크 12개(CP-254~265)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 버튼(Button) 으로 넘어갑니다.

다음 편 예고 ▶ 「386. (CP-266) 버튼 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 링크로 작동하는 요소가 스크린 리더에서 링크로 인지되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 링크(Link) 가이드 — https://www.krds.go.kr/html/site/component/component_24.html

WCAG 2.1 SC 4.1.2 Name, Role, Value — https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

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

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