아티클

키보드 접근키

2011-03-28 13:50:16

웹사이트에서 자체적으로 접근키를 제공하는 것은 웹 브라우저를 포함한 다양한 사용자 도구의 단축키와 항상 충돌할 가능성을 내포하고 있습니다. 하지만 이러한 충돌 가능성을 예측하여 피하도록 하고 핵심 UI에 직접 키보드로 접근할 수 있는 접근키를 제공하는 것은 키보드를 선호하거나 또는 키보드 밖에 사용할 수 없는 사용자에게 도움이 됩니다.

접근키를 지원하는 요소들

  • a
  • area
  • button
  • input
  • label
  • legend
  • textarea

접근키 적용 문법 예

<input type="text" name="search" id="search" title="검색어입력" accesskey="S" />
<input type="text" name="uid" id="uid" title="로그인ID" accesskey="L" />

 

운영체제 및 웹 브라우저 벤더별 접근키 조합법

아래 표에서 브라우저 버전을 명시하지 않은 이유는 버전별로 접근키에 차이가 존재하지 않기 때문 입니다.

운영체제 웹 브라우저 접근키 조합
Win Internet Explorer Alt + Accesskey
Firefox Alt + Shift + Accesskey
Opera Shift + Esc + Accesskey
Safari Alt + Accesskey
Mac Firefox Ctrl + Accesskey
Safari Ctrl + Accesskey
Opera Shift + Esc + Accesskey

접근키 테스트 셋

아래 버튼에는 표시된 텍스트와 동일한 접근키가 지정되어 있습니다. 여러분의 다양한 운영체제와 브라우저로 접근키 사용 테스트를 시도할 수 있습니다.




웹 브라우징 도구의 단축키와 웹 사이트에서 제공하는 접근키가 충돌하는 경우

웹 사이트에서 제공하는 접근키와 웹 브라우징 도구(스크린리더 포함)의 단축키가 충돌하는 경우 보통 웹 사이트에서 제공하는 접근키가 우선권을 지니게 됩니다. 따라서 겹치도록 설정되어 있다 하더라도 사실상 충돌하지는 않습니다. 하지만 겹치는 설정은 피해야 합니다. 이들이 겹치는 상황에서 사용자가 웹 브라우징 도구의 단축키를 시도하는 경우 의도하지 않았던 상황(웹 사이트 접근키가 실행되는)이 발생하기 때문에 바람직 하지 않습니다.

웹 브라우징 도구의 단축키와 웹 사이트에서 제공하는 접근키가 겹치는 실제 사례

웹 브라우징 도구에서 제공하는 단축키 조합법과 웹 사이트의 접근키 조합법이 다르면 겹치지 않습니다. 대부분의 경우 이 두 가지 경우의 조합법이 서로 다르지만 웹 사이트의 접근키에 'Alt+?' 조합을 사용하는 웹 브라우징 도구의 경우에는 웹 브라우징 도구 자체에 할당된 단축키 조합 'Alt+?' 과 겹칠 수 있습니다. Win + Internet Explorer, Win + Safari 인 경우 웹 사이트 접근키 조합으로 'Alt+?' 형식을 사용하고 있어서 겹칠 수 있는 경우에 해당 됩니다. 아래는 웹 사이트 접근키와 겹칠 수 있는 웹 브라우징 장치의 단축키 목록 이므로 피하도록 합니다. 한편 이 두 설정이 겹치는 경우임에도 불구하고 웹 브라우징 장치의 단축키를 쓰려면 Alt 키와 조합키를 동시에 누르지 않고 순차적으로 따로 누르는 방법으로 브라우징 장치의 단축키를 사용할 수 있게 됩니다. 단, 스크린리더 장치와 기타 장치들은 그렇지 않습니다.

User Agent / Keyboard Shortcut alt+A alt+B alt+D alt+E alt+F alt+G alt+H alt+I alt+N alt+T alt+V alt+W alt+Z alt+ alt+= alt+*
Web Browser Win + IE 5~6 Favorites     Edit File   Help     Tools View          
Win + IE 7 Favorites   주소표시줄 Edit File   Help     Tools View       접근키 미지원  
Win + Safari   Bookmarks   Edit File   Help History     View Window        
Screen Reader Win + IE + Sense Reader                         읽기모드 화면 재구성   위치기억목록
Etc Win + IE + Naver Toolbar                 툴바 검색창              
Win + IE + Google Toolbar           툴바 검색창                    

Daum, Yahoo 툴바를 함께 조사하였습니다. Daum 툴바는 툴바 검색창 단축키로 Alt+S, Alt+N 을 사용중 입니다. Yahoo 툴바는 툴바 검색창 단축키로 Alt+S 를 사용중 입니다. 그러나 Daum과 Yahoo는 웹 사이트에 이와 겹치는 접근키가 존재하는 경우 웹 사이트가 제공하는 접근키가 우선 적용될 수 있도록 존중하고 있어서 겹치는 사례에 포함시키지 않았습니다.

웹 브라우징 도구와 겹치지 않는 안전한 접근키

아래 제시된 키들은 2008년 현재 대중적인 웹 브라우징 도구에서 제공하는 단축키와 겹치지 않아서 사용하기에 안전한 것으로 판단되는 권장 접근키 목록 입니다.

Alphabet Key C J K L M O P Q R S U X Y
Numeral Key 1 2 3 4 5 6 7 8 9 0      
Etc Key ` - [ ] ; ' , . /        

현 서비스에 적용중인 접근키 조합

현재 네이버 서비스에는 아래와 같은 접근키가 제공되고 있습니다. 현존하는 대중적인 웹 브라우징 도구의 단축키와 겹치지 않는 설정이며 핵심 UI로 직접 접근하는 것을 돕습니다. 이 밖에 더 많은 접근키를 제공하기 위하여 검토중 입니다. 서비스의 핵심 UI를 선별하고 가능하다면 그 의미에 맞는 두문자어를 선택하여 사용할 것입니다. 되도록 네이버 뿐만 아니라 다른 보편적인 웹사이트에 적용하더라도 유용한 접근키 목록을 만들 수 있도록 노력할 것입니다. 이러한 접근키 목록이 공식적인 표준안 등으로 국내 또는 국제사회에서 명문화 되지는 않겠지만 서로 다른 웹 사이트에서 이것을 일관성 있게 제공한다면 긍정적인 사용자 경험을 만들어 낼 것이기 때문입니다.

서비스 접근 키 접근 키 의미
네이버 검색창 S Search
로그인 L Login
댓글 0
댓글을 작성하려면 해주세요.