같은 이름, 다른 곳이면 헷갈린다

KRDS CP-263 — 링크 레이블은 고유한 내용으로 제공하고 있다.

0. 들어가며 — “자세히 보기”가 열 개

이번 383편은 링크 레이블을 고유한 내용으로 제공하라는 규칙입니다.

목록 페이지에서 — 각 항목마다 “자세히 보기” 링크가 붙어, 같은 텍스트 “자세히 보기”가 10개, 20개 반복되는 경우가 흔하죠. 시각 사용자는 옆 항목 제목으로 구별하지만, 스크린 리더로 링크만 모아 들으면 “자세히 보기, 자세히 보기, 자세히 보기…”가 무의미합니다. CP-263은 같은 목적지가 아니면 링크 레이블을 고유하게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 고유한 레이블

CP-263 (컴포넌트 > 링크) “링크 레이블은 고유한 내용으로 제공하고 있다.”

서로 다른 목적지로 가는 링크들이 같은 레이블을 갖지 않게, 각 링크 레이블을 고유한 내용으로 작성하라는 뜻입니다.

정리: 다른 목적지 링크는 서로 다른(고유한) 레이블을 가져라. 이게 CP-263입니다.

2. 왜 링크 레이블이 고유해야 하나

링크 레이블은 — 사용자가 링크를 구별하는 이름입니다. 그런데 다른 목적지로 가는 여러 링크가 같은 레이블을 가지면 — 사용자는 그것들을 구별 못 하죠. 같은 이름인데 다른 곳으로 가니 혼란스럽습니다.

중복 레이블의 흔한 사례:

목록의 “자세히 보기” — 게시판·자료실 목록에서 각 항목마다 “자세히 보기”, “더보기”, “바로가기” 링크가 붙어, 같은 텍스트가 수십 개 반복되죠. 각 링크의 목적지는 다른데(각자 다른 상세 페이지) 레이블은 똑같습니다.

“신청”, “다운로드” — 여러 항목의 “신청”, “다운로드” 버튼이 같은 텍스트로 반복.

왜 문제인가:

스크린 리더 구별 불가 스크린 리더 사용자가 링크만 모아 듣는 탐색(링크 목록)을 하면 “자세히 보기, 자세히 보기, 자세히 보기…”가 줄지어 들립니다. 어느 게 무엇의 자세히 보기인지 전혀 구별 못 하죠. CP-262 (텍스트가 목적지 설명)의 위반이자, 중복으로 더 심각합니다.

시각 사용자 — 맥락 의존 — 시각 사용자는 옆 항목 제목을 함께 보고 구별하지만, 정작 링크 텍스트 자체는 무의미하죠.

그래서 CP-263은 — 다른 목적지 링크는 고유한 레이블을 갖게 하라고 합니다. 방법:

레이블에 목적지 포함 — “자세히 보기” 대신 “○○ 보도자료 자세히 보기”, “△△ 공고 자세히 보기”처럼 — 각 링크 레이블에 무엇의 링크인지(항목 제목 등)를 포함해 고유하게. 그러면 링크만 들어도 구별되죠.

aria-label 보충 화면 텍스트는 “자세히 보기”로 짧게 유지하고 싶으면 aria-label로 “○○ 보도자료 자세히 보기” 같은 고유한 이름을 보충. 시각적으론 “자세히 보기”, 스크린 리더엔 고유한 이름이죠. (화면 텍스트 포함, SC 2.5.3.) 또는 시각적으로 숨긴 텍스트(sr-only)로 항목 제목을 추가하기도 합니다 자세히 보기 <span class="sr-only">○○ 보도자료</span>.

aria-labelledby — 링크와 항목 제목을 연결해, 스크린 리더가 둘을 합쳐 읽게 하기도 하죠.

같은 목적지면 같아도 됨. 한 가지 — 같은 목적지로 가는 링크들은 같은 레이블이어도 괜찮습니다(오히려 일관성). 예를 들어 페이지 상단과 하단에 같은 ‘홈으로’ 링크가 둘 있으면, 둘 다 ’홈으로’여도 같은 곳이라 혼란이 없죠. CP-263이 막는 건 — 다른 목적지인데 같은 레이블입니다(WCAG SC 2.4.4/2.4.9 관련). ’같은 이름 = 같은 곳’이라는 사용자 기대가 지켜져야 하죠.

관련 규칙. 링크 레이블 명확성 3종 CP-257(예측), CP-262(설명), CP-263(고유) 의 마지막입니다. 명확하고 (257), 설명적이고(262), 고유하게(263). 특히 목록·반복 구조에서 CP-263이 중요하죠 반복되는 “자세히 보기”가 대표적 위반이니까요.

정리하면 — 다른 목적지로 가는 링크가 같은 레이블이면 사용자(특히 스크린 리더)가 구별 못 하므로, 레이블에 목적지를 포함하거나 aria-label로 보충해 각 링크를 고유하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

고유성 — 다른 목적지 링크가 서로 다른 레이블을 갖는가(반복 “자세히 보기” 등 배제).

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

같은 목적지 일관 — 같은 목적지 링크는 일관된 레이블인가(이건 허용).

개선 방향

반복 레이블에 목적지(항목 제목) 포함: “자세히 보기”→“○○ 자세히 보기”.

화면 텍스트 짧게 두면 aria-label/sr-only/aria-labelledby로 고유 이름 보충.

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

역할	책임
콘텐츠/UX 라이팅	고유한 링크 레이블 작성
퍼블리셔/개발	aria-label/sr-only 보충 구현

기관 유형	CP-263 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (반복 링크가 있는 목록 등)

목록·반복 링크 구조를 가진 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 다른 목적지 링크가 서로 다른 레이블을 갖나요(반복 “자세히 보기” 배제)?

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

□ 같은 목적지 링크는 일관된 레이블인가요?

❓ FAQ

Q1. 목록의 “자세히 보기”가 다 똑같은데요? 각 링크에 항목 제목을 포함(“○○ 자세히 보기”)하거나 aria-label· sr-only로 보충해 고유하게 합니다. Q2. 화면 텍스트는 “자세히”로 짧게 두고 싶어요. aria-label로 스크린 리더용 고유 이름을 보충하면 됩니다 (화면 텍스트 포함). Q3. 같은 곳으로 가는 링크가 둘이면요? 같은 목적지면 같은 레이블이어도 됩니다. 다른 목적지인데 같은 게 문제죠.

6. 마무리

CP-263의 메시지:

같은 이름, 다른 곳이면 헷갈린다 — 다른 목적지 링크는 고유한 레이블로.

다른 목적지인데 같은 레이블이면(반복 “자세히 보기” 등) 사용자, 특히 링크만 듣는 스크린 리더 사용자가 구별 못 합니다. 레이블에 목적지를 포함하거나 aria로 보충해 고유하게 하죠. 같은 목적지면 같아도 됩니다. 다음 편은 링크의 적절한 크기입니다.

다음 편 예고 ▶ 「384. (CP-264) 링크를 적절한 크기로 제공하고 있다.」

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컴포넌트,웹표준