기본
•
하이퍼링크는 웹의 근간이다. 웹이 제공하는 제일 중요한 기능 중 하나 라고 할 수 있다.
•
문서와 다른 리소스들과 연결하는 하이퍼링크는, 웹의 태초부터 제공하는 중요한 기능중 하나였고 지금도 가장 중요한 기능 중 하나다.
•
모든 요소들이 링크의 내용물이 될 수 있다. → 이미지, 헤딩(h1, h2, h3)
attribute
title
<p>
I'm creating a link to
<a
href="https://www.mozilla.org/en-US/"
title="The best place to find more information about Mozilla's
mission and how to contribute">
the Mozilla homepage</a>.
</p>
HTML
복사
•
링크에 추가적인 정보를 전달할 수 있는 attribute
•
링크 호버 시 title을 확인할 수 있다. → 화면 낭독기도 이용자들에게 읽는 정보이지만 타이틀의 정보를 전달하는 확실한 정보는 아니다. 제일 좋은 방법은 aria-label, aria-describedby와 같은 ARIA attribute이며, 화면 낭독기와 마우스를 이용하지 않는 이용자들(키보드 이용자들)은 접근하기 어려운 정보다.
올바른 링크 명
<!-- AS-IS -->
<p>
<a href="https://www.mozilla.org/firefox/">Click here</a> to download Firefox
</p>
<!-- TO-BE -->
<p><a href="https://www.mozilla.org/firefox/">Download Firefox</a></p>
HTML
복사
•
화면 낭독기 이용자들은 문맥 파악 이전에 링크를 먼저 확인하는 경향이 있음 → 해당 하이퍼 링크의 정확한 정보를 제공해야 한다.
◦
비장애인 이용자들도 페이지를 이용할때 링크를 빠르게 스캔하여 직접 이동하려는 경향이 있다. 사용성을 위해서라도 정확한 링크 텍스트를 제공해야 한다.
•
검색엔진 또한 링크에 이름을 이용하여 정보를 크롤링하므로 해당 링크가 가지고 있는 키워드를 정확히 제공하는게 중요하다.
•
URL 링크 텍스트로 사용해선 안된다. → 가독성이 떨어진다.
•
“~~로 이동하는 링크”, “links to”를 링크 텍스트에 추가하지 않는다.
◦
화면 낭독기 이용자들 → 이미 링크라는 정보를 제공 받는다.
◦
비장애인 이용자들 → 이미 시각적으로 링크라는 정보를 제공 받는다. 주로 underline, 다른 색으로 출력한다.
path
같은 디렉터리
<p>
Want to contact a specific staff member? Find details on our
<a href="contacts.html">contacts page</a>.
</p>
HTML
복사
내부 디렉터리
<p>Visit my <a href="projects/index.html">project homepage</a>.</p>
HTML
복사
부모 디렉터리
<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>
HTML
복사
밑줄 긋기
•
이용자들은 밑줄 긋기를 하이퍼링크로 강하게 인식한다. → 시멘틱이 맞을 경우 <u> 태그를 이용해 디자인을 줄 수 있으나 css를 이용해 변경하는게 더 확인하기 쉽다.