16. 적절한 링크 텍스트

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

  1. 1) 빈 링크

    빈 링크는 제거하거나 키보드가 접근할 수 없도록 제공한다.

    오류 사례
    소스 코드 
    <a href=”#”></a>
    해결 방안
    빈 링크 제거
  2. 2) 독립적 이미지 링크

    이미지에 대체 텍스트를 제공한다.

    오류 사례
    소스 코드 
    <a href=”#”><img src=”music.jpg” alt=”” /></a>
    해결 방안 
    <a href=”#”><img src=”music.jpg” alt=”MCND 데뷔 쇼케이스 2월26일 8PM VLIVE” /></a>
  3. 3) 독립적 배경 이미지 링크

    IR 기법으로 대체 텍스트를 제공한다.

    오류 사례
    소스 코드 
    <a href=”#” class=”menu”></a>
    해결 방안 
    <a href=”#” class=”menu”><span class=”blind”>메뉴</span></a>
  4. 4) 썸내일 이미지

    이미지에 해당하는 텍스트를 a태그로 묶어서 중복 제공되지 않도록 제공한다.
    묶을 수 없는 경우에는 중복되더라도 이미지에 대한 대체 텍스트를 제공한다.

    준수 사례
    해결 방안 
    <a href=”#”><img src=”thumb01.jpg” alt=”” /><span>육아 때문에 서로를 외롭게 하지 말자</span></a>
또는
<a href=”#”><img src=”thumb01.jpg” alt=”하원 후 스스로 공부하는 비결은?” /></a>
<a href=”#”><span>하원 후 스스로 공부하는 비결은?</span></a>
  5. 5) 명확한 링크

    적절한 링크 텍스트를 명확하게 제공한다.

    오류 사례
    소스 코드 
    더 자세한 내용을 확인하려면 <a href=”#”>여기</a>를 클릭하세요.
    해결 방안 
    <a href=”#”>다음 콘텐츠 보기</a>