웹 문서에 단축키를 달자!.

HTML 문서에도 사용자를 위한 단축키를 제공할 수 있는 방법이 있다는 것을 아는지? 물론 모든 브라우저가 그것을 지원하는 것은 아니지만 인터넷 익스플로러 4 이상을 사용하고 있다면 각종 링크나 폼 요소(가령, 텍스트 박스)에 사용자가 쉽게 접근할 수 있도록 단축키를 제공할 수 있다.

그것을 가능하게 하는 HTML 속성은 ACCESSKEY이다. 이 속성은 마우스 대신 키보드를 이용하여 링크나 폼 요소에 접근할 수 있도록 하기 위해 W3C에서 고안한 것이다.

모든 유저가 마우스를 이용하여 작업하는 그래픽 환경이 아닐 수도 있다는 W3C의 얘기는 어느 정도 공감이 가는 얘기이다. 사실 어떤 사용자들은(대개 도스 시절부터 키보드 활용에 능숙한 사람들이겠지만...) 마우스 사용보다 키보드의 단축키를 사용하는 것을 더 좋아하는 사람들이 있다. 이 글을 읽는 사람들 중에서도 웹 페이지의 많은 링크들을 옮겨 다니기 위해 마우스 대신 '탭(tab)'키를 이용하는 사람이 있을 것이다.  하여튼, 웹 페이지를 개발하는 사람들은 혹시라도 있을지 모를 사용자의 편의를 위해 단축키를 제공하는 방법들을 살펴 볼 필요가 있다.

물론 폼 요소들을 논리적으로 배치시켰다면 굳이 마우스를 이용하지 않고도 '탭(tab)' 키를 이용하여 각 폼 요소를 이동할 수 있을 것이다. 하지만 이번 시간에 배울 내용은 특정 폼 요소에 단번에 접근하는 "단축키"에 대한 것이다.

ACCESSKEY 사용 방법

우선 간단한 예제를 살펴보자. 아래 텍스트 필드에 바로 접근하기 위해 Alt + a를, 링크에 접근하기 위해 Alt + b를 눌러 보기 바란다(매킨토시에서는 Alt키 대신 Cmd키).

ALT + a를 누르세요 : <INPUT accessKey=a>

ALT + b를 누르세요 : 코리아인터넷닷컴

 

위의 폼 필드와 링크에 대한 소스 코드는 다음과 같다.

<input type="text" accesskey="a">

<a href="http://korea.internet.com" accesskey="b">코리아인터넷닷컴</a> 

 

그렇다. 사용 방법은 의외로 간단하다. accesskey 속성을 지원하는 태그에서 "accesskey=" 다음에 원하는 단축키를 할당하면 된다. HTML 스펙상으론 accesskey 다음에 어떠한 유니코드를 할당하는 것도 가능하지만 관례상 a~z 까지의 문자를 사용한다. 대소문자는 동일한 키로 취급한다. accesskey 속성을 지원하는 태그는 다음과 같다.

<a>, <AREA>, <BUTTON>, <INPUT>, <LABEL>, <LEGEND>, <TEXTAREA>

 

이제 또 다른 실용 가능한 예를 살펴 보자. LABEL과 INPUT 컨트롤을 적절히 사용하는 방법이다. 이미 LABEL 태그를 이용하여 폼 컨트롤 다루기에 대해 살펴본 적이 있는데 이번엔 단축키를 이용하여 폼 컨트롤에 접근하는 방법을 알아 보자. 마우스로 User 부분을 클릭해도 텍스트 필드가 포커스 되겠지만, ALT+U를 눌러도 텍스트 필드가 포커스 되는 것을 확인할 수 있을 것이다.

User : <INPUT id=fuser name=user> (ALT + U)

Password : <INPUT id=fpw type=password name=pw> (ALT + P)  

위 예제에 대한 소스 코드는 다음과 같다.

<LABEL for="fuser" accesskey="U">

<b><font color="navy"><u>U</u></font></b>ser :

</LABEL>

<INPUT type="text" name="user" id="fuser"> (ALT + U)<br>

<LABEL for="fpw" accesskey="P">

<b><font color="navy"><u>P</u></font></b>assword :

</LABEL>

<INPUT type="password" name="pw" id="fpw"> (ALT + P)

 

accesskey를 사용할 때 한 가지 알아야할 것이 있다. 웹 페이지 개발자는 해당 단축키를 알아도 사용자는 웹 페이지에 어떤 단축키가 정의되어 있는지 모르기 때문에 위의 예와 같이 User의 U 부분에 밑줄을 그어 암시적으로 단축키를 알려주거나, 해당 폼 요소 옆에 ALT+U와 같이 명시적으로 해당 단축키를 알려줄 필요가 있다.

마지막 예를 하나 더 들어 보도록 하자. 아래 링크에 해당하는 각각의 단축키를 눌러 보라. 특히, FILE 메뉴 링크에 접근하기 위해 ALT + F를 눌러 보라.

HOME  |  FILE  |  EDIT  |  HELP

 

여기서 주의해야할 것이 있다. ALT+F는 사실 인터넷 익스플로러의 "파일" 메뉴에 대한 단축키이다. 하지만 웹 문서에서 accesskey를 통해 단축키를 정의하면 브라우저의 내부 단축키는 동작하지 않게 된다. 그러므로 이 사실을 염두에 두고 단축키를 정의하기 바란다.

한 가지 더!

만일 자바스크립트를 이용하여 단축키를 구현하고자 할 때에는 (이 때에는 ALT 키를 누르지 않고도 단축키를 만들 수 있다) 다음 강좌를 읽으면 도움을 얻을 수 있다.

----------------------------------------------------------------------

출처: 셀클럽 - http://sellclub.co.kr

다른곳에서 이용할시에는 꼭 출처를 같이 복사이용 바랍니다.