어디로 가는지 이름에 담아라

KRDS CP-257 — 링크 레이블은 연결된 목적지 정보를 예측할 수 있는 내용으로 제공하고 있다.

0. 들어가며 — “여기를 클릭”의 문제

이번 377편은 링크 레이블을 연결된 목적지를 예측할 수 있는 내용으로 제공하라는 규칙입니다.

링크 텍스트가 “여기”, “클릭”, “더보기”, “바로가기”처럼 모호하면 — 사용자는 ‘눌러보기 전엔 어디로 가는지’ 모르죠. 특히 스크린 리더 사용자는 링크만 모아 들을 때 “여기, 여기, 여기”가 무의미합니다. CP-257은 링크 레이블이 목적지를 예측할 수 있게 명확하라고 규정합니다. 긴급 공지 링크(CP-160), 페이지네이션 이름(CP-128) 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 목적지 예측 가능 레이블

CP-257 (컴포넌트 > 링크) “링크 레이블은 연결된 목적지 정보를 예측할 수 있는 내용으로 제공하고 있다.”

링크의 텍스트(레이블)를, 클릭하면 어디로 가는지(무엇을 보게 되는지) 예측할 수 있는 명확한 내용으로 작성하라는 뜻입니다.

정리: 링크 레이블로 목적지를 예측할 수 있게 하라. 이게 CP-257입니다.

2. 왜 목적지를 예측할 수 있어야 하나

링크의 레이블(텍스트)은 — 사용자가 ‘클릭하면 어디로 갈지’를 판단하는 단서입니다. 이 레이블이 명확하면 사용자는 안심하고 누르고, 모호하면 ’어디로 가는 거지?’ 하며 망설이거나 엉뚱한 곳으로 가죠. 이는 WCAG의 ‘링크 목적’ (SC 2.4.4 Link Purpose) 원칙입니다 — 긴급 공지 링크(CP-160), 페이지네이션 이름(CP-128)에서 반복됐죠.

모호한 레이블의 문제:

“여기”, “클릭”, “바로가기”, “더보기” — 이런 레이블은 그 자체로 목적지를 전혀 알려주지 않습니다. “자세한 내용은 [여기]를 클릭”에서 ’여기’만으론 무엇의 자세한 내용인지 모르죠.

시각 사용자도 불편 — 주변 텍스트를 함께 봐야 짐작하지만, 정확한 목적지는 모릅니다.

스크린 리더 사용자에게 치명적 — 스크린 리더 사용자는 종종 링크만 따로 모아 듣는 탐색(링크 목록)을 합니다. 이때 “여기, 여기, 클릭, 더보기, 바로가기”처럼 모호한 링크들이 줄지어 들리면 — 완전히 무의미하죠. 어느 링크가 무엇인지 전혀 구별 못 합니다.

그래서 CP-257은 — 링크 레이블이 목적지를 예측할 수 있게 명확해야 한다고 합니다:

목적지 포함 레이블 — “여기”보다 “신청 안내 보기”, “2026 예산서 다운로드”, “민원 상세 페이지”처럼 — 어디로 가는지·무엇을 보게 되는지 구체적으로. 레이블만 들어도 ’아, 이 링크는 신청 안내로 가는구나’를 알죠.

링크 목록에서도 명확 — 스크린 리더 사용자가 링크만 모아 들어도 각 링크가 명확히 구별되게.

레이블 vs 부가 설명. 화면에 보이는 링크 텍스트를 짧게(“자세히”) 유지하고 싶으면 — aria-label이나 시각적 으로 숨긴 텍스트로 목적지를 보충할 수 있죠(페이지네이션 CP-128, 긴급 공지 CP-160 방식). 다만 — 가능하면 보이는 텍스트 자체를 명확히 하는 게 가장 좋습니다(모두에게 도움). aria-label은 화면 텍스트를 포함하게 해 어긋나지 않게요(WCAG SC 2.5.3).

관련 규칙들. 링크 레이블의 명확성은 — CP-257(목적지 예측), CP-262(목적지 적절 설명), CP-263(고유한 내용) 세 규칙이 함께 다룹니다:

CP-257 — 목적지를 예측할 수 있게.

CP-262 — 목적지를 적절히 설명(더 구체적인 품질).

CP-263 — 각 링크 레이블이 고유(같은 레이블이 다른 곳으로 가면 혼란).

이 세 규칙이 합쳐져 — 링크 레이블이 명확하고, 적절하고, 고유하게 하죠. CP-257은 그 출발점입니다.

판단 기준. ’이 링크 레이블만 보고(주변 맥락 없이) 어디로 가는지 알 수 있는가?’가 기준입니다. 그렇다면 명확한 레이블, 아니라면(“여기” 등) 개선이 필요하죠. 특히 스크린 리더의 링크 목록 탐색을 상상하면 — 레이블만 으로 구별되어야 함이 분명해집니다.

정리하면 — 링크 레이블은 목적지를 판단하는 단서이므로, “여기”·“클릭” 같은 모호함을 피하고 목적지를 예측할 수 있는 명확한 내용으로 작성해 모든 사용자(특히 스크린 리더)가 어디로 가는지 알게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

목적지 예측 — 링크 레이블만으로 목적지를 예측할 수 있는가(“여기”·“클릭” 모호함 배제).

링크 목록 명확 — 링크만 모아 들어도 각 링크가 구별되는가.

부가 설명 — 짧은 텍스트면 aria-label 등으로 목적지를 보충하는가.

개선 방향

“여기”·“더보기”를 목적지 포함 레이블로(“신청 안내 보기” 등).

짧은 텍스트는 aria-label로 보충(화면 텍스트 포함). 보이는 텍스트 명확화 우선.

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

역할	책임
콘텐츠/UX 라이팅	목적지 예측 가능한 링크 레이블 작성
퍼블리셔/개발	aria-label 보충 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 링크 레이블만으로 목적지를 예측할 수 있나요(“여기”·“클릭” 배제)?

□ 링크만 모아 들어도 각 링크가 구별되나요?

□ 짧은 텍스트면 aria-label 등으로 목적지를 보충하나요?

❓ FAQ

Q1. “여기를 클릭”이 왜 문제죠? ’여기’만으론 목적지를 모릅니다. 특히 링크만 모아 듣는 스크린 리더 사용자 에겐 무의미하죠. Q2. 화면 텍스트는 짧게 두고 싶어요. aria-label로 스크린 리더용 명확한 이름을 보충하되, 가능하면 보이는 텍스트 자체를 명확히 하는 게 모두에게 좋습니다. Q3. CP-262와 뭐가 다른가요? CP-257(목적지 예측)·CP-262(적절 설명)·CP-263(고유)이 링크 레이블 명확성을 함께 다룹니다. CP-257이 출발점이죠.

6. 마무리

CP-257의 메시지:

어디로 가는지 이름에 담아라 — 링크 레이블로 목적지를 예측할 수 있게.

링크 레이블은 목적지 판단 단서입니다. “여기”·“클릭” 같은 모호함은 사용자를 망설이게 하고, 링크만 듣는 스크린 리더 사용자에겐 무의미하죠. 목적지를 예측할 수 있는 명확한 레이블로 작성합니다. 다음 편은 이메일·전화번호 링크입니다.

다음 편 예고 ▶ 「378. (CP-258) 이메일 주소, 전화번호 정보를 링크로 제공하고 있다.」

ViewCheck는 링크 레이블이 목적지를 예측할 수 있는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 2.4.4 Link Purpose (In Context) — https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html

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

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