적절한 링크 텍스트 검사 방법

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)

6.4.3 적절한 링크 텍스트

운용의 용이성

국제 기준 (WCAG 2.2)

2.4.4 링크 목적(문맥 내) (A) ↗

어떻게 검사하나요

'여기', '더보기', '클릭' 처럼 목적지를 알 수 없는 링크 텍스트가 있는지 확인하세요. 링크 텍스트만 읽어도(또는 주변 문맥과 함께) 어디로 가는지 알 수 있어야 합니다.

자동 검사로 잡히는 부분

이 항목은 3개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

• 링크에 인식 가능한 텍스트가 없습니다 link-name

  아이콘만 있는 링크, 빈 링크는 스크린 리더가 "링크"라고만 읽습니다. 텍스트를 넣거나 aria-label을 제공하세요.

  <!-- 잘못된 예 -->
  <a href="/cart"><svg>…</svg></a>
  <!-- 올바른 예 -->
  <a href="/cart" aria-label="장바구니"><svg aria-hidden="true">…</svg></a>

• 같은 이름의 링크가 서로 다른 곳으로 이동합니다 identical-links-same-purpose

  같은 텍스트(예: "자세히 보기")의 링크가 서로 다른 목적지를 가지면 스크린 리더의 링크 목록에서 구별할 수 없습니다. 각 링크에 대상이 드러나는 텍스트 또는 aria-label을 부여하세요 (예: "공지사항 자세히 보기").

• 링크 텍스트만으로 목적을 알기 어렵습니다 a11ychk:link-text

  "여기", "더보기", "클릭" 같은 일반어 링크가 발견되었습니다. 링크 목록만 훑어 듣는 스크린 리더 사용자는 무엇에 대한 링크인지 알 수 없습니다. 주변 문장·목록 항목에서 목적을 알 수 있으면 통과이므로 직접 확인하세요.

  개선 방법: 링크 텍스트 자체를 구체적으로 바꾸거나("채용 공고 더보기"), 시각 디자인을 유지해야 하면 aria-label이나 숨김 텍스트로 보완하세요.

  <a href="/jobs">더보기<span class="sr-only"> — 채용 공고</span></a>