a태그 접근성과 메일, 전화번호, 문자 연결하기

 

a태그의 속성 중 href 는 연결할 수 있는 요소가 은근히 많습니다. 보통 다른 사이트 링크를 걸어줄 때 가장 많이 사용하게 되는것 같은데요, 사용하는 방법으로는 아래와 같습니다. 

 

a태그 접근성, href로 메일 문자 전화번호 연결하기

 

<a></a>의 접근성

<a href="https://www.daum.net/" title="다음(새창)" target="_blank">
    <img src="daum.gif" alt="다음" />
</a>
 

* title : 웹 접근성을 위해서 호출하는 페이지에 대해 명확하게 이해할 수 있도록 title을 제공해야합니다.

* title은 대체이미지 텍스트 alt와는 다른 의미 입니다. a태그 안에 img 태그가 있다면 alt로 이미지가 호출 되지 않을 시 이미지가 무엇인지 설명해주는 alt 속성이 필요합니다.

 

a태그에 메일, 전화번호, 문자 연결하기

// 전화번호
<a href="tel:010-1234-5678" title="테스트 번호 연결">010-1234-5678</a>
 
// 메일
<a href="mailto:test@naver.com" title="테스트 메일 연결">메일</a>
 
// 문자
<a href="sms:010-1234-5678" title="테스트 문자 연결">문자</a>
 

** 전화번호 형식은 구글링해보니 01012345678 이나 010-1234-5678 모두 상관 없는것 같습니다. 외국의 경우 +82 10-1234-5678 와 같이 국가번호를 넣어주어야 합니다.

 

** 전화번호 같은 경우 아이폰에서 숫자로 된 요소들을 자동링크 걸어준다고 합니다. 때문에 우편번호 같은 경우도 자동으로 전화번호로 인식하여 링크를 걸어준다고 하는데요, 이를 방지할 수 있는 코드는 아래와 같습니다.

<meta name="format-detection" content="telephone=no">

 

그 밖에 a href 로 연결할 수 있는 요소들

특정 아이디로 매칭해서 연결 할수도 있으며 script를 연결해서 사용할 수도 있습니다. 다만, 스크립트를 연결해서 사용할 때에는 웹 접근성에 대해서도 다시 한번 생각해보아야 합니다. 웹접근성연구소에 따르면 다른 페이지를 호출하기 위한 용도는 a태그를 사용하는 것이 맞지만 단순 스크립트를 사용하는 역할이라면 button 태그를 사용하는 것이 좋습니다.

 

참고링크

www.w3schools.com/tags/att_a_href.asp