<a> 태그와 <button> 태그를 상황에 맞게 구분하자

발생일: 2011.04.23

문제:
얼마 전 QA에서 아래와 같은 버그를 등록했다.
특정 버튼에서 오른쪽 마우스 버튼을 눌러 새탭으로 열었을 때, 기대하는 페이지가 아닌 동일한 페이지가 열린다는 것이다.

해당 버튼은 click 이벤트에 의해 스크립트로만 동작하는 것이었으며, 대충 아래와 같은 형태이다.
(실제로 이벤트는 스크립트에서 바인딩한다.)

    <a href="#" onclick="doSomething(); return false;">This is button.</a>

 
스크립트로만 동작하고 기본 동작을 막아뒀기 때문에 클릭했을 때에는 아무런 문제가 없다.
하지만 앵커 태그이기 때문에 새탭으로 열었을 경우엔, 현재 페이지에 #이 덧붙여져 열리게 되는 것이다.

이건 버그라고 할 수 있을까?


해결책:
실제로 여러 포털에 이런 문제가 있는 버튼들이 굉장히 많다.
앵커 태그로 버튼을 구현해 스크립트로 추가 기능을 제공하는 버튼들이 그것들이며,
주로 레이어를 전환하거나, 도움말 레이어를 여는 등의 기능을 한다.
뭐, '문제'라고까지 하기에는 좀 사소하다고 생각할 수도 있다.

사실, 이건 기획을 마크업으로 옮기면서부터 발생한 문제였다.

앵커 태그를 버튼처럼 사용하고 스크립트에 의해 추가 동작을 구현하고자 한다면:
  1) 스크립트를 통해 추가 기능을 제공한다.
  2) 만약 스크립트가 제공되지 않으면 같은 기능을 하는 다른 페이지로 이동할 수 있도록 해준다.

웹접근성을 확보하는 기초 내용 중의 하나이다.
대체 페이지가 존재하지 않고 스크립트에 의해서만 동작하는 기능이라면, 앵커 태그보다는 버튼 태그를 써야했다.


아래 구글의 더보기 버튼을 보자.

'더보기' 버튼을 누르면 그림과 같이 다른 메뉴에 대한 레이어가 제공된다.
그렇다면, '더보기' 버튼에서 새탭으로 열기를 하면 어떻게 될까?

기대했던 대로, 더보기와 관련된 '구글 제품 더보기' 페이지로 이동한다.
이처럼 앵커 태그를 쓰고자 한다면 스크립트 없이도 이동할 페이지를 제공해줘야 한다.


아래는 구글의 검색 결과 화면이다.
좌측 서브 메뉴 영역의 더보기 버튼은 앵커 태그로 작성되어 있지만 대체 페이지를 제공하지 않는다.
새탭으로 열면 어떻게 될까?

예상했던 대로, 새탭으로 열 경우 현재 경로에 #이 붙은 페이를 띄운다. 즉, google.co.kr/# 으로 이동한다.
원하지 않는 결과다.


버튼 타입의 태그(input[type=button], button)일 경우, 컨텍스트 메뉴를 열어도 새탭으로 열기 기능을 제공하지 않는다.
버튼 태그로 되어 있는 구글의 검색 버튼에 오른쪽 마우스 버튼을 클릭하면 아래와 같이 링크를 여는 기능을 제공하지 않는다.

결론:
  앵커 태그에 스크립트로 추가 기능을 제공할 때에는 항상 대체 페이지도 함께 제공해야 한다.
  단순히 스크립트로만 작동하는 기능이라면 버튼 타입의 태그를 사용하자.