HTML 문서에도 사용자를 위한 단축키를 제공할 수 있는 방법이 있다는 것을 아는지? 물론 모든 브라우저가 그것을 지원하는 것은 아니지만 인터넷 익스플로러 4 이상을 사용하고 있다면 각종 링크나 폼 요소(가령, 텍스트 박스)에 사용자가 쉽게 접근할 수 있도록 단축키를 제공할 수 있다.
그것을 가능하게 하는 HTML 속성은 ACCESSKEY이다. 이 속성은 마우스 대신 키보드를 이용하여 링크나 폼 요소에 접근할 수 있도록 하기 위해 W3C에서 고안한 것이다.
모든 유저가 마우스를 이용하여 작업하는 그래픽 환경이 아닐 수도 있다는 W3C의 얘기는 어느 정도 공감이 가는 얘기이다. 사실 어떤 사용자들은(대개 도스 시절부터 키보드 활용에 능숙한 사람들이겠지만...) 마우스 사용보다 키보드의 단축키를 사용하는 것을 더 좋아하는 사람들이 있다. 이 글을 읽는 사람들 중에서도 웹 페이지의 많은 링크들을 옮겨 다니기 위해 마우스 대신 '탭(tab)'키를 이용하는 사람이 있을 것이다. 하여튼, 웹 페이지를 개발하는 사람들은 혹시라도 있을지 모를 사용자의 편의를 위해 단축키를 제공하는 방법들을 살펴 볼 필요가 있다.
물론 폼 요소들을 논리적으로 배치시켰다면 굳이 마우스를 이용하지 않고도 '탭(tab)' 키를 이용하여 각 폼 요소를 이동할 수 있을 것이다. 하지만 이번 시간에 배울 내용은 특정 폼 요소에 단번에 접근하는 "단축키"에 대한 것이다.
ACCESSKEY 사용 방법
우선 간단한 예제를 살펴보자. 아래 텍스트 필드에 바로 접근하기 위해 Alt + a를, 링크에 접근하기 위해 Alt + b를 눌러 보기 바란다(매킨토시에서는 Alt키 대신 Cmd키).
ALT + a를 누르세요 : <INPUT accessKey=a> ALT + b를 누르세요 : 코리아인터넷닷컴
그렇다. 사용 방법은 의외로 간단하다. accesskey 속성을 지원하는 태그에서 "accesskey=" 다음에 원하는 단축키를 할당하면 된다. HTML 스펙상으론 accesskey 다음에 어떠한 유니코드를 할당하는 것도 가능하지만 관례상 a~z 까지의 문자를 사용한다. 대소문자는 동일한 키로 취급한다. accesskey 속성을 지원하는 태그는 다음과 같다.
이제 또 다른 실용 가능한 예를 살펴 보자. LABEL과 INPUT 컨트롤을 적절히 사용하는 방법이다. 이미 LABEL 태그를 이용하여 폼 컨트롤 다루기에 대해 살펴본 적이 있는데 이번엔 단축키를 이용하여 폼 컨트롤에 접근하는 방법을 알아 보자. 마우스로 User 부분을 클릭해도 텍스트 필드가 포커스 되겠지만, ALT+U를 눌러도 텍스트 필드가 포커스 되는 것을 확인할 수 있을 것이다.
accesskey를 사용할 때 한 가지 알아야할 것이 있다. 웹 페이지 개발자는 해당 단축키를 알아도 사용자는 웹 페이지에 어떤 단축키가 정의되어 있는지 모르기 때문에 위의 예와 같이 User의 U 부분에 밑줄을 그어 암시적으로 단축키를 알려주거나, 해당 폼 요소 옆에 ALT+U와 같이 명시적으로 해당 단축키를 알려줄 필요가 있다.
마지막 예를 하나 더 들어 보도록 하자. 아래 링크에 해당하는 각각의 단축키를 눌러 보라. 특히, FILE 메뉴 링크에 접근하기 위해 ALT + F를 눌러 보라.
태그&소스
매니져: 미정
패밀리 사이트 바로가기
처음
