2.4.3. 적절한 링크 텍스트

링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

목적

시각 또는 인지 능력에 제한이 있는 사용자가 각 링크의 목적을 쉽게 이해하고, 이동 여부를 결정할 수 있도록 돕기 위함이다. 링크 텍스트가 직관적이고 명확하면 사용자는 복잡한 추론 과정 없이 ‘이 링크가 무엇을 하는지’ 바로 파악하고 탐색할 수 있다.

배경 및 필요성

링크 텍스트가 ‘여기를 클릭’처럼 모호하게 작성되면, 화면낭독프로그램 사용자나 인지 장애가 있는 사용자는 해당 링크가 어떤 내용을 담고 있으며, 클릭 시 어디로 이동하는지 직관적으로 이해하기 어렵다.

명확한 링크 텍스트는 링크의 용도와 목적을 바로 파악할 수 있게 하여, 사용자가 필요한 정보를 쉽고 빠르게 찾도록 돕는다.

또한, 화면낭독프로그램은 웹 페이지 내의 모든 링크를 목록으로 제공하는 기능이 있다. 이 목록에서 각 링크의 텍스트만 보고도 그 용도와 목적을 알 수 있어야, 사용자가 필요한 링크를 선택하고 이동할 수 있다.

경우에 따라 링크 텍스트에 설명이 충분히 담기지 않을 때는, 링크의 앞뒤에서 보충 설명을 제공할 수 있다. 그러나 가능하다면 링크 텍스트 자체에 필요한 정보를 담는 것이 효과적이며, 충분한 설명을 담기 어려운 경우에는 주변 맥락을 통해 링크의 용도와 목적을 이해할 수 있도록 전달할 수 있다.

기본 규칙

자세히 보기’, ‘여기 클릭’ 같은 표현을 지양하고, ‘상품 상세 정보 보기’, ‘고객센터’ 등 구체적 용어를 사용한다.
사용자가 맥락 없이 링크 텍스트만 봐도 이동할 페이지나 기능을 유추할 수 있어야 한다.
링크 텍스트만 읽어도 목적을 이해할 수 있어야 한다. ‘다운로드’만 쓰기보다는, ‘PDF 가이드 다운로드’처럼 구체화해서 링크 목록만 듣고도 판단할 수 있게 한다.
추가 설명을 앞뒤에 제공해 링크 텍스트와 함께 링크 목적을 명확하게 전달한다.
URL 경로로만 링크 텍스트를 제공한 경우 주변 맥락을 통해 링크 목적을 이해할 수 있어야 한다.
(권고) 주변 문맥에서 설명이 충분히 제공된 경우라도, 가능하면 링크 자체만으로도 의미를 이해할 수 있도록 직접적인 내용을 담아 제공하는 것이 바람직하다.

적용 사례

1) 목적이나 용도를 명확히 제공

링크 텍스트는 클릭하기 전에 목적지나 기능을 예측할 수 있어야 한다. 이는 특히 화면낭독프로그램 사용자나 키보드만 사용하는 사용자에게 중요하다.

예를 들어, ‘접근성 가이드라인 보기’와 같이 구체적이고 직관적인 링크 텍스트를 사용하면 사용자는 링크를 클릭하지 않아도 그 목적을 쉽게 파악할 수 있다.

<a class="link_button txt url" href="https://www.w3.org/">
  월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)
</a>
<a class="link_button txt url" href="https://www.w3.org/WAI/">
  웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)
</a>와 짐 대처(Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다.

2) 고유하고 명확한 링크 텍스트 제공

링크 텍스트는 사용자의 클릭을 유도하는 것이 아니라, 링크의 목적을 명확히 알려주는 중요한 정보이다.

서로 다른 용도·목적을 가진 링크에는 각각 구별되는 고유한 텍스트를 사용하여, 혼동 없이 목적을 이해할 수 있게 작성해야 한다.

3) 아이콘을 사용한 링크

아이콘만으로 링크를 제공할 경우, 사용자가 해당 아이콘의 용도를 명확히 이해할 수 있도록 링크 텍스트를 함께 제공해야 한다. 단순히 이미지의 모양(예: ‘돋보기’ 또는 ‘세 줄 메뉴’)을 설명하기보다, 이미지가 수행하는 구체적인 역할이나 기능(예: ‘검색 열기’, ‘메뉴 보기’)을 전달해야 한다.

특히, 화면을 볼 수 없는 사용자는 이미지를 직접 인식할 수 없기에 이를 대체하는 방법으로 링크 텍스트를 제공해야 한다.

a) 대체 텍스트 속성 활용

아이콘이 img 요소로 구현된 경우, alt 속성을 사용하여 링크의 용도나 목적을 명확히 제공한다.

<li>
  <a href="...">
    <img src="btn_kakaoplus_main.png" alt="카카오플러스친구 바로가기">
  </a>
</li>

b) 텍스트를 시각적으로 숨김

배경 이미지 등 콘텐츠에 대체 텍스트를 제공하기 어려운 경우, 화면에는 보이지 않는 텍스트를 제공하여 화면낭독프로그램과 같은 보조 기술 사용자에게 링크의 목적을 전달해야 한다.

<!-- ARIA 속성을 이용한 방법 -->
<a href="..." aria-label="장바구니">
  <span class=”cart"></span>
</a>

<!-- 숨김 텍스트 기법을 이용한 방법 -->
<a href="...">
  <span class=”cart"></span>
  <span class="visually-hidden">장바구니</span>
</a>

c) 텍스트를 함께 제공

아이콘만으로는 충분히 직관적이지 않은 경우, 텍스트를 함께 제공하여 용도를 명확히 할 수 있다. 이때, 아이콘 이미지는 텍스트를 빈 값으로 하여 동일한 내용이 중복되지 않도록 한다.

<a href="">
  <img src="cart-icon.png" alt="">
  장바구니
</a>

4) 시각적으로 노출되지 않는 정보를 포함한 링크 텍스트

링크 텍스트가 단순히 ‘1’, ‘2’, ‘3’ 같은 숫자나 추상적인 표현으로만 제공되면, 화면낭독프로그램 사용자는 그 링크의 의미를 이해하기 어렵다.

다음은 게시물 목록을 나타내는 페이지네이션으로 링크가 사용된 사례이다. 페이지네이션의 경우 단순히 ‘1’, ‘2’, ‘3’과 같은 숫자 대신, ‘1 페이지’, ‘2 페이지’, ‘3 페이지’처럼 링크의 목적을 명확히 드러내는 방식으로 작성해야 한다. 이렇게 하면 화면낭독프로그램 사용자도 각 링크가 무엇을 의미하는지 쉽게 이해할 수 있다.

이미지. 숫자와 함께 ‘페이지’ 숨김 텍스트를 함께 제공한 링크 텍스트 예시

<a href="...">1 <span class="visually-hidden">페이지</span></a>
<a href="...">2 <span class="visually-hidden">페이지</span></a>
<a href="...">3 <span class="visually-hidden">페이지</span></a>
...
<a href="...">7 <span class="visually-hidden">페이지</span></a>
<a href="...">8 <span class="visually-hidden">페이지</span></a>

5) 맥락을 통해 이해 가능한 링크 텍스트

링크 텍스트만으로 의미를 전달하기 어려운 경우, 앞뒤 문맥을 통해 링크의 목적을 명확하게 파악할 수 있도록 한다. 예를 들어, ‘더보기’와 같은 일반적인 링크 텍스트가 여러 번 등장하더라도, 각 링크가 포함된 콘텐츠의 맥락을 통해 사용자가 해당 링크가 어떤 내용을 가리키는지 짐작할 수 있다면 허용된다.

그러나 접근성 측면에서는 링크 텍스트 자체에 구체적인 정보를 포함하는 방식을 권장한다.

다음은 동일한 ‘자세히 보기’ 링크가 여러 개 존재하지만, 맥락을 통해 사용자가 어떤 정보를 가리키는지 구분할 수 있는 사례이다.

이미지. ‘자세히 보기’ 링크 텍스트의 목적을, 맥락을 통해 이해할 수 있는 예시

<p>
  최신 스마트폰 모델이 출시되었습니다. 탁월한 성능과 세련된 디자인을 확인해보세요.
  <a href="smartphone-details.html">자세히 보기</a>
</p>
<p>
  노트북의 새로운 기준을 제시하는 모델이 등장했습니다. 강력한 성능과 휴대성을 만나보세요.
  <a href="laptop-details.html">자세히 보기</a>
</p>

개선 필요 사례

1) 링크 텍스트 미제공

콘텐츠 위에 투명한 링크를 배치하고 a 요소 내 아무런 내용 없이 제공한 사례이다.

화면낭독프로그램은 링크의 의미를 파악할 수 있는 텍스트가 없기 때문에, 대신 href 속성 값인 ‘/detail/30302923.html’을 사용자에게 전달하게 된다. 이를 전달받은 사용자는 해당 링크가 무엇을 의미하는지 알 수 없다.

또한 스크랩·입사지원 버튼이 따로 존재하여, 사용자는 링크를 실행해야 하는지, 버튼만 사용 가능할 수 있는지 판단하기 어려워 사용자는 어떤 요소를 실행해야 하는지 선택하기 어렵다.

.product  { position:relative; width:300px; height:160px;}
.link_box  { position:absolute; width:100%; height:100%; z-index:10; }

<div class="product">
  <a href="/detail/30302923.html" class="link_box"></a>
  <span class="product_logo">
    <img src="..." alt="(주)도리도리컴퍼니" class="img">
  </span>
  <strong class="product_tit">(주)도리도리컴퍼니</strong>
  <em class="product_desc">중견직 신입 매니저 모집</em>
  <button class="btn_scrap">스크랩</button>
  <button class="btn_xs">입사지원</button>
</div>

개선 방법

링크가 사용 목적을 명확히 전달할 수 있도록 적절한 텍스트를 제공한다.

링크가 공고의 상세 페이지로 이동하는 목적으로 사용되었다면 ‘(주)도리도리컴퍼니 - 정규직 신입 매니저 모집 공고 상세 내용’과 같이 사용자가 클릭할 이유를 명확히 알 수 있는 텍스트를 제공해야 한다.

2) URL을 링크 텍스트로 제공

링크 텍스트로 URL이 제공된 사례이다.

URL은 링크 목적이나 내용을 설명하지 않고, 긴 문자열을 화면낭독프로그램으로 들으면 복잡하게 들린다. 또한 텍스트와 링크가 일치하지 않는 경우 사용자는 링크의 목적을 더욱 파악하기 힘들다.

<h4>관련 사이트 바로가기</h4>
<ul>
  <li>
    <a href="https://myacamemy.ac.kr">http://myacamemy.ac.kr</a>
  </li>
  <li>
    <a href="https://www.seoule.ac.kr">https://www.seoule.ac.kr</a>
  </li>
  <li>
    <a href="https://www.a11ysch.ac.kr">https://www.seoule.ac.kr</a>
  </li>
  <li>
    <a href="https://www.a11y-on.kr">https://www.a11y-online.kr</a>
  </li>
</ul>

개선 방법

URL 링크의 목적을 알 수 있도록, ‘서울 학원’, ‘접근성 아카데미’ 등 직관적인 문구로 제공한다.

<h4>관련 사이트 바로가기</h4>
<ul>
  <li>
    <a href="https://myacamemy.ac.kr">나의 학원</a>
  </li>
  <li>
    <a href="https://www.seoule.ac.kr">서울 학원 </a>
  </li>
  <li>
    <a href="https://www.a11ysch.ac.kr">접근성 아카데미</a>
  </li>
  <li>
    <a href="https://www.a11y-on.kr">접근성 온라인 교육</a>
  </li>
</ul>