웹 접근성_적절한 링크 텍스트

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

링크의 용도나 목적지를 링크 텍스트만으로 또는 주변의 맥락으로부터 충분히 이해할 수 있도록 링크 텍스트를 제공해야 한다는 것입니다.

 

 

빈 링크

링크 텍스트를 제공하지 않아 이렇게 빈 링크가 존재하는 경우 스크린리더 사용자는 무슨 링크인지 알 수 없으며 링크가 크기를 갖지 않는 이상 키보드 사용자는 어디에 초점이 갔는지 알 수 없습니다.

따라서 의미 없는 빈 링크는 제거해야 합니다.

 

독립적 이미지 링크

이미지를 독립적 링크로 제공하는 경우 링크 텍스트는 이미지의 대체 텍스트이기 때문에 이미지의 alt가 잘못 제공되었거나 빈 값으로 제공된 경우 오류입니다.

따라서 적절한 링크 텍스트를 제공해야 합니다.

 

독립적 배경 이미지 링크

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

 

썸네일 링크

썸내일 이미지와 텍스트를 각각 링크로 구현하는 경우 링크 텍스트를 각각 제공해야 하기 때문에 내용이 중복됩니다.

따라서 다음와 같이 이미지와 텍스트를 하나의 링크로 묶어주고 중복되지 않도록 이미지에는 alt를 빈 값으로 제공하고 링크 텍스트를 제공해 주는 것이 좋습니다.

 

명확한 링크 제공

다음과 같이 방향 지시로 링크 목적을 안내한 경우 스크린 리더 사용자는 키보드로 링크에 접근하게 되면 "여기 링크"라고 읽어주게 되어 이 링크를 클릭하면 어떻게 되는지 알 수가 없습니다.

 

이는 오류로 진단되고 "명확한 지시 사항" 제공에도 영향을 미칩니다.

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

"더 보기"나 "자세히 보기" 같은 링크의 경우에도 문맥상 알 수 있으나 어떤 콘텐츠의 더 보기인지 명확히 링크 텍스트를 제공해주는 것이 더 좋기 때문에 예를 들면 "공지사항 더 보기"라고 공지사항 텍스트를 숨김 처리로 제공해주는 것이 좋습니다.

즉, 링크의 용도나 목적을 알 수 있도록 적절한 링크 텍스트를 제공해야 합니다.