적절한 링크 텍스트

링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다. 링크의 용도나 목적지를 링크 텍스트만으로 또는 주변의 맥락으로부터 충분히 이해할 수 있도록 링크 텍스트를 제공해야 한다는 것이다. 적절한 링크 텍스트에 대한 사례들을 살펴보도록 하겠다.

 

---

 

빈 링크
링크 텍스트를 제공하지 않아 이렇게 빈 링크가 존재하는 경우, 스크린리더 사용자는 무슨 링크인지 알 수 없으며 링크가 크기를 갖지 않는 이상 키보드 사용자는 어디에 초점이 갔는지 알 수 없다. 따라서 다음과 같이 의미 없는 빈 링크는 제거해야 한다.

<a href="…" title=""></a>

 

---

 

독립적 이미지 링크
이미지를 독립적 링크로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에 이미지의 alt가 잘못 제공되었거나 빈 값으로 제공된 경우 오류라고 할 수 있다. 따라서 다음와 같이 적절한 링크 텍스트를 제공해야 한다.

<a href="#">
    <img src="btn_next.png" alt="다음 콘텐츠 보기">
</a>

 

---

 

독립적 배경 이미지 링크
이전에 언급했었던 적절한 대체 텍스트 제공에서 언급했던 경우이다. 링크에 의미 있는 배경 이미지를 적용한 경우에도 이미지 대체 텍스트이자 링크 텍스트를 적절하게 제공해야 한다.

<a href="#" class="link_next">다음 콘텐츠 보기</a>

 .link_next{
    background-image: url('./img/icon_next.png');
}

 

---

 

썸내일 링크
썸내일 링크 또한 이전에 언급했던 부분이다. 썸내일 이미지와 텍스트를 각각 링크로 구현하는 경우 링크 텍스트를 각각 제공해야 하기 때문에 내용이 중복된다. 따라서 다음와 같이 이미지와 텍스트를 하나의 링크로 묶어주고 중복되지 않도록 이미지에는 alt를 빈 값으로 제공하고 링크 텍스트를 제공해 주는 것이 좋다.

<a href="…">
    <img src="thumb01.jpg" alt="">
    <span>웨딩 사진을 모티브로 만든 도일리 #프랑스자수</span>
</a>

 

---

 

명확한 링크 제공
다음과 같이 방향 지시로 링크 목적을 안내한 경우, 스크린 리더 사용자는 키보드로 링크에 접근하게 되면 "여기 링크"라고 읽어주게 되어 이 링크를 클릭하면 어떻게 되는지 알 수가 없다. 이는 오류로 진단되고 이전에 언급했었던 명확한 지시 사항 제공에도 영향을 미치게 된다.

<p>
    더 자세한 사항을 보려면
    <a href="#">여기</a>를 클릭하세요.
</p>

 

---

 

URL만 링크로 제공하는 것보다는 해당 주소의 목적을 함께 제공하는 것이 좋으며, "더 보기"나 "자세히 보기" 같은 링크의 경우에도 문맥상 알 수 있으나, 어떤 콘텐츠의 더 보기인지 명확히 링크 텍스트를 제공해주는 것이 더 좋다. 예를 들면 "공지사항 더 보기"라고 공지사항 텍스트를 숨김 처리로 제공해주는 것이 좋다. 즉, 링크의 용도나 목적을 알 수 있도록 적절한 링크 텍스트를 제공해야 한다.

 

 

 

---

 

 

 

[ 출처 ]

BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35121