6.4.3 적절한 링크 텍스트

요구 사항

링크의 용도나 목적지는 링크 텍스트만으로 또는 주변 맥락으로부터 충분히 이해할 수 있어야 합니다. 표준은 다음 사례를 듭니다.

• 문장 일부에 링크를 걸 때는 목적지·용도를 표현한 텍스트에 링크를 겁니다.
• ‘바로가기’, ‘GO’ 같은 링크는 목적지 정보를 주는 텍스트 바로 뒤에 둡니다.
• 목적지 텍스트와 이미지 링크가 함께 있으면 하나의 링크로 묶는 것이 바람직하며, 이때 이미지의 대체 텍스트는 공백 문자로 제공합니다.
• 같은 제품을 다른 관점에서 설명하는 페이지로 가는 링크들은 링크 텍스트를 서로 다르게 구성하는 것이 바람직합니다.
• 탭으로 나열된 공지사항 옆 ‘더보기’ 링크는 맥락상 ‘공지사항 더보기’임을 알 수 있어야 합니다.
• 아이콘으로 링크 텍스트를 대신할 때는 아이콘만으로 용도를 이해할 수 있게 하고, 대체 텍스트는 5.1.1을 따릅니다.

왜 필요한가요

화면낭독기 사용자는 링크 목록만 따로 모아 탐색하는 경우가 많습니다. “여기를 클릭”, “더보기”만 여러 개 있으면 어디로 가는 링크인지 알 수 없어 링크마다 앞뒤 문장을 확인해야 합니다.

도움받는 사용자

• 시각장애인(화면낭독기 사용자)
• 지적장애·인지장애가 있는 사용자
• 음성 명령 사용자

적용 방법

링크 텍스트 자체를 구체적으로 씁니다. 디자인상 짧은 텍스트가 필요하면 화면에 숨긴 텍스트로 보충합니다. aria-label을 쓸 때는 보이는 텍스트를 앞에 포함해 6.5.3도 함께 지킵니다.

<!-- 권장 -->
<a href="/notice">공지사항 <span class="sr-only">게시판</span> 더보기</a>
<p>자세한 내용은 <a href="/guide.pdf">2025년 장학금 신청 안내(PDF, 1.2MB)</a>를 참고하세요.</p>

<!-- 이미지와 텍스트를 하나의 링크로 -->
<a href="/product/12"><img src="kb.jpg" alt=""> 무선 키보드 K12</a>

사례

<section>
  <h2>공지사항</h2>
  <ul>…</ul>
  <a href="/notice">공지사항 더보기</a>
</section>

<p>신청서는 <a href="/form">여기</a>를 클릭하세요.</p>
<a href="/n">more</a> <a href="/e">more</a>

자주 하는 실수

• “여기”, “클릭”, “more”처럼 의미 없는 링크 텍스트만 있습니다.
• 여러 ‘더보기’ 링크가 어떤 목록의 것인지 맥락으로도 구분되지 않습니다.
• 이미지 링크와 텍스트 링크가 같은 곳으로 가면서 따로 있어 두 번 읽힙니다.
• URL 주소 자체를 링크 텍스트로 사용해 길게 읽힙니다.

검사 방법

• 화면낭독기의 링크 목록(NVDA Insert+F7)에서 각 링크의 목적을 알 수 있는지 확인합니다.
• 목적을 알 수 없는 링크는 같은 문장·목록·제목 등 맥락으로 이해되는지 확인합니다.
• 이미지 링크의 대체 텍스트가 목적지를 설명하는지 확인합니다.

관련 ARIA

다른 지침의 대응 항목