적절한 링크 텍스트

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

---

🥑 빈 링크

     - 링크 텍스트를 제공하지 않아 빈 링크가 존재하는 경우 스크린 리더 사용자는 무슨 링크인지 알 수 없으며,

        링크가 크기를 갖지 않는 이상 키보드 사용자는 어디에 초점이 갔는지 알 수 없다.

     - 따라서 다음과 같이 의미 없는 빈 링크는 제거해야 한다.

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

 

🥑 독립적 이미지 링크

     - 이미지를 독립적 링크로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에

         이미지의 alt 속성 값이 잘못 제공되거나 빈 값으로 제공되지 않아야 한다.

     - 링크에 의미 있는 배경 이미지를 적용한 경우에도 이미지 대체 텍스트이자 링크 텍스트를 적절하게 제공해야 한다.

     1) 이미지 요소

<a href="#">
    <img src="search.png" alt="키워드 검색">
</a>

     2) 배경 이미지

<a href="#" class="link_search">키워드 검색</a>

.link_search {
    background-image:url('./img/search.png');
}

 

🥑 명확한 링크 제공

     - "여기를 클릭하세요."와 같이 방향 지시로 링크 목적을 안내한 경우 스크린 리더 사용자는

        키보드로 링크에 접근하였을 때 "여기 링크"라고 읽어주게 되어 링크를 클릭하면 어떻게 되는지 알 수 없다.

     - URL만 링크로 제공하는 것보다 해당 주소의 목적을 함께 제공하는 것이 좋으며,

        더 보기 또는 자세히 보기처럼 문맥상 알 수 있어도 공지사항 더 보기라는 텍스트를 숨김 처리로 제공하여

        어떤 콘텐츠인지 명확히 링크 텍스트를 제공해주는 것이 더 좋다.