어디로 가는지 알 수 있게

KRDS CP-160 — 목적지를 예측할 수 있는 링크 이름 또는 부가 설명을 제공하고 있다.

0. 들어가며 — 긴급 공지 그룹의 마지막, 280편

이번 280편은 긴급 공지 그룹(CP-151~160, 10개)의 마지막 규칙입니다. 목적지를 예측할 수 있는 링크 이름 또는 부가 설명을 제공하라는 내용이죠. 시리즈 280편을 이 규칙으로 맞습니다.

긴급 공지에는 상세 화면으로 가는 링크가 하나 있습니다(CP-156). 그런데 이 링크 이름이 “자세히 보기”, “여기” 처럼 모호하면 — 사용자, 특히 스크린 리더 사용자는 ‘어디로 가는지’ 모른 채 눌러야 하죠. CP-160은 링크 이름이 목적지를 예측할 수 있게 명확하라고 규정하며 긴급 공지 10개를 마무리합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 예측 가능한 링크 이름·부가 설명

CP-160 (컴포넌트 > 긴급 공지) “목적지를 예측할 수 있는 링크 이름 또는 부가 설명을 제공하고 있다.”

긴급 공지의 링크에, 클릭하면 어디로 가는지(무엇을 보게 되는지) 예측할 수 있는 명확한 이름이나 보충 설명을 제공하라는 뜻입니다.

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

2. 왜 예측 가능한 링크 이름이어야 하나

링크의 ‘이름(텍스트)’은 사용자가 ’클릭하면 어디로 갈지’를 판단하는 단서입니다. 이 이름이 명확하면 사용자는 안심하고 누르고, 모호하면 ’어디로 가는 거지?’ 하며 망설이거나 엉뚱한 곳으로 가게 되죠. 긴급 상황에서는 이 예측 가능성이 특히 중요합니다 — 급한 사용자가 잘못된 링크를 누르거나 망설일 여유가 없으니까요.

모호한 링크 이름의 문제. “자세히 보기”, “여기”, “클릭”, “바로가기” 같은 이름은 — 그 자체로는 목적지를 전혀 알려주지 않습니다. 시각 사용자는 주변 텍스트(공지 내용)와 함께 보고 어느 정도 짐작하지만, 그래도 정확한 목적지는 모르죠. 더 큰 문제는 스크린 리더 사용자입니다 — 이들은 종종 링크만 따로 모아 듣는 탐색을 합니다(링크 목록). 이때 “자세히 보기”만 들으면 무엇의 자세히 보기인지 전혀 알 수 없죠. “여기, 여기, 여기” 처럼 모호한 링크들이 줄지어 들리면 완전히 무의미합니다(WCAG SC 2.4.4 Link Purpose).

예측 가능한 링크 이름. 그래서 링크 이름은 목적지를 짐작할 수 있게 구체적이어야 합니다 — “자세히 보기” 보다 “○○ 지역 호우 대처 안내 보기”, “신청 마감 연장 공지 보기”처럼요. 이름만 들어도 ’아, 이 링크는 호우 대처 안내로 가는구나’를 알 수 있죠. 스크린 리더 사용자도 링크 목록에서 명확히 구별합니다.

부가 설명이라는 대안. 디자인상 화면에 보이는 링크 텍스트를 짧게(“자세히 보기”) 유지하고 싶을 수 있습니다. 그럴 때는 부가 설명으로 목적지를 보충하죠:

aria-label — 화면엔 “자세히 보기”로 보이되, aria-label="○○ 호우 대처 안내 자세히 보기"로 스크린 리더엔 명확한 이름을 전달(페이지네이션 CP-128과 같은 방식). 단 aria-label은 화면 텍스트를 포함해 어긋나지 않게 합니다(SC 2.5.3 Label in Name).

title 속성 — 마우스오버 보충 설명(보조 수단).

시각적으로 숨긴 텍스트 — <a>○○ 호우 안내 <span class="sr-only">자세히 보기</span></a> 식으로 스크린 리더용 보충.

핵심은 — 시각·비시각 사용자 모두가 링크의 목적지를 예측할 수 있게 하는 것입니다. 명확한 링크 텍스트가 가장 간단하고 좋고, 짧은 텍스트를 유지해야 하면 부가 설명으로 보충하죠.

외부 링크·새 창 표시. 추가로, 링크가 외부 사이트로 가거나 새 창을 연다면 그 정보도 알려주는 것이 예측 가능성을 높입니다 — “(새 창)”, “(외부 사이트)” 표시나 aria 보충으로요. 긴급 상황에서 갑자기 새 창이 뜨면 당황할 수 있으니까요.

이로써 긴급 공지 10개 규칙(CP-151~160)이 완성됩니다 — 목적 제한(151·152), 게시 방식(153·155), 배치(154·157), 단일 링크(156), 접근성(158·159·160)까지. 가장 중요한 정보를, 적절한 용도로, 모두에게 명확하게 전달하는 규칙들이죠. CP-160은 그 마지막 — 사용자가 안심하고 다음 행동(링크)으로 나아가게 합니다.

3. 점검 / 개선

무엇을 점검하나

명확한 이름 — 링크 이름으로 목적지를 예측할 수 있는가(“자세히 보기”·“여기” 같은 모호함 배제).

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

외부·새 창 표시 — 외부 링크·새 창이면 그 정보를 알리는가.

개선 방향

링크 텍스트를 목적지 포함 구체적으로(“○○ 안내 보기”), 또는 aria-label로 보충.

외부 링크·새 창은 표시. aria-label은 화면 텍스트 포함(SC 2.5.3).

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

역할	책임
콘텐츠/UX 라이팅	목적지 예측 가능한 링크 이름 작성
퍼블리셔/개발	aria-label·부가 설명·새 창 표시 구현

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

긴급 공지에 링크를 두는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 링크 이름으로 목적지를 예측할 수 있나요(“자세히 보기”·“여기” 모호함 배제)?

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

□ 외부 링크·새 창이면 그 정보를 알리나요?

❓ FAQ

Q1. “자세히 보기”가 왜 문제죠? 목적지를 알려주지 않습니다. 특히 링크만 모아 듣는 스크린 리더 사용자에겐 무의미하죠. “○○ 안내 보기”처럼 구체적으로 합니다. Q2. 화면 텍스트는 짧게 두고 싶어요. aria-label로 스크린 리더용 명확한 이름을 보충하되, 화면 텍스트를 포함하게 합니다(SC 2.5.3). Q3. 새 창 표시도 필요한가요? 긴급 상황에서 갑작스러운 새 창은 당황을 부르니, “(새 창)” 등으로 알리면 예측 가능성이 높아집니다.

6. 마무리

CP-160의 메시지:

어디로 가는지 알 수 있게 — 목적지를 예측할 수 있는 링크 이름을 제공하라.

링크 이름은 ’클릭하면 어디로 갈지’의 단서입니다. “자세히 보기”·“여기” 같은 모호함은 사용자를 망설이게 하고, 스크린 리더 사용자에겐 무의미하죠. 목적지 포함 구체적 이름이나 aria-label 보충으로 예측 가능하게 합니다. 이로써 긴급 공지 10개 규칙(CP-151~160)을 마칩니다. 다음 편부터는 새 컴포넌트 그룹 달력(Calendar) 으로 넘어갑니다.

다음 편 예고 ▶ 「281. (CP-161) 달력 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 긴급 공지 링크가 목적지를 예측할 수 있는 이름을 제공하는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 긴급 공지(Critical alerts) 가이드 — https://www.krds.go.kr/html/site/component/component_13.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컴포넌트,웹표준