NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


Opera와 Safari는 왜 Tab Navigation이 안될까요?

본문 건너 뛰기

안녕하세요? ‘N’본부 웹표준화팀 정찬명 입니다. 오늘은 웹 브라우저의 키보드 탐색(Navigation)에 관한 이야기를 해볼까 합니다. 웹에 익숙한 사용자로부터 마우스를 사용할 수 없는 환경에 이르기까지 키보드 탐색을 지원하는 인터페이스는 사용성을 증진시키고 보편적인 접근을 보장하게 됩니다. 키보드를 활용했을 때 더욱 빠르고 쉽게 과업을 완료할 수 있는 상황은 사용성을 증진시켜주는 사례이고, 마우스가 없거나 시각장애(전맹)인이 키보드만으로 웹 페이지를 탐색할 수 있도록 인터페이스가 제공된 상황은 접근성을 보장하는 사례에 해당 됩니다.

키보드 탐색 인터페이스의 유형

키보드 탐색을 지원하는 인터페이스 제작에 있어서 가장 중요한 고려사항은 Anchor(Hyperlink)와 Form Control(input, textarea, button … etc) 항목을 키보드만으로 접근하고 이동할 수 있도록 제공하는 것이며, 다른 하나는 사용자가 브라우저마다 또는 웹 페이지마다 다른 탐색 접근키를 알도록 하는 것입니다. 국내에는 Internet Explorer 사용자와 Firefox 사용자가 많기 때문에 대부분 Tab키를 활용하면 웹 페이지의 Anchor와 Form Control 탐색이 가능하다는 것을 알고 있습니다. 하지만 Opera와 Safari의 Tab키는 Form Control만 탐색할 뿐 Anchor를 탐색하는데 쓰이지 않고 있어서 Anchor를 탐색하려면 어떻게 해야 하는지 누군가 설명해 주어야 합니다. 또한 웹 페이지의 특정 영역으로 즉시 포커스를 이동시켜주는 인터페이스를 제공하기 위하여 제작자가 제공하는 접근키(Accesskey)는 이를 적극적으로 알려주지 않는 이상 무용지물이기 때문에 도움말로 제공해 주는것이 좋습니다. 웹 페이지에서 활용 가능한 키보드 탐색 인터페이스는 크게 아래와 같이 두 가지 경우로 구분 됩니다.

웹 브라우저가 제공하는 탐색키(Navigation Key)
예를 들면 Tab, Enter, Space, Ctrl+F 등으로 대부분의 웹 브라우저가 동일 목적으로 동일 키를 제공
웹 제작자가 제공하는 접근키(Access Key)
예를 들면 Internet Explorer에서 Alt+(알파벳키 or 숫자키), Firefox에서 Alt+Shift+(알파벳키 or 숫자키)

웹 브라우저가 제공하는 탐색키 활용법

Enter키와 Space키 그리고 Ctrl+F키는 현존하는 4대 웹 브라우저(Internet Explorer, Firefox, Opera, Safari)가 완전히 일치하는 사용법을 제공하고 있습니다. 그러나 Tab키의 경우 Internet Explorer와 Firefox에서의 사용법은 동일하지만 Opera와 Safari에서의 사용법은 달라서 이 부분을 따로 추가 설명 하겠습니다.

Enter
Hyperlink된 페이지를 방문하거나 Form을 Submit하는 기능
Space
Check, Radio 콘트롤의 상태를 전환하거나 Button을 누르는 기능
Ctrl+F
웹 페이지 내에서 문자열을 찾는 기능
Tab, Shift+Tab
Internet Explorer, Firefox에서는 Anchor와 Form 항목을 탐색
Opera와 Safari에서는 Form 항목만 탐색

Opera의 Anchor 탐색키 활용법

Opera는 Tab키로 Form만 탐색이 되기 때문에 Anchor에는 접근이 되지 않습니다. 하지만 Anchor에 접근하는 탐색키가 별도로 존재합니다.

A, Ctrl+↓
Anchor를 아래쪽으로 탐색합니다. ‘A’키는 9.5버전 미만에서만 지원합니다. 9.5버전부터 지원하지 않습니다.
Q, Ctrl+↑
Anchor를 위쪽으로 탐색합니다. ‘Q’키는 9.5버전 미만에서만 지원합니다. 9.5버전부터 지원하지 않습니다.
Shift+(left, right, up, down)
Anchor를 원하는 방향으로 탐색합니다.

Safari의 Anchor 탐색키 활용법

Safari는 본래 Tab키로 Anchor와 Form의 탐색이 모두 가능하지만 설치 직후 기본설정 옵션을 변경하지 않는 한 Form만 탐색하도록 되어 있습니다. Tab키가 Anchor까지 탐색할 수 있도록 하려면 아래와 같이 기본설정을 변경해 주어야 합니다.

  1. 편집
  2. 기본설정
  3. 고급
  4. 손쉬운 사용
  5. ‘Tab을 눌러 웹 페이지에 있는 각 항목을 선택표시’에 체크

Safari의 Tab키 기본설정 변경 대화상자

웹 제작자가 제공하는 접근키 활용법

네이버는 별도의 도움말을 제공하지 않고 있지만 검색 Form과 로그인 Form에 키보드로 직접 접근할 수 있는 접근키를 제공하고 있습니다. 검색 Form에는 Search를 의미하는 ‘S‘키가 할당되어 있고 로그인 Form에는 Login을 의미하는 ‘L‘키 가 할당되어 있습니다. 이러한 알파벳키(또는 숫자키)들은 브라우저에서 지원하는 다른 키와 조합시켜서 사용하여야 하는데 Internet Explorer와 Safari 브라우저라면 Alt키와 접근키를 조합해서 사용할 수 있고 Firefox와 Opera는 이 조합키가 또 다릅니다. Firefox는 Alt+Shift+Accesskey로 접근이 가능합니다. Opera는 Shift+Esc키를 누르면 현재 페이지의 Accesskey를 보여주고 그 다음 웹 페이지에 할당된 Accesskey를 누를 수 있는데 이 방식의 장점은 현재의 페이지에 어떤 Accesskey가 할당되어 있는지 한눈에 알 수 있다는 점입니다. 웹 브라우저 별로 접근키(Accesskey)와 조합시킬 수 있도록 제공된 조합키는 아래와 같이 다릅니다.

Windows에 설치된 브라우저의 접근키 활용법

Internet Explorer, Safari, Chrome
Alt+Accesskey
Firefox
Alt+Shift+Accesskey
Opera
Shift+Esc+Accesskey 확인+Accesskey

Mac에 설치된 브라우저법의 접근키 활용법

Safari, Firefox
Ctrl+Accesskey
Opera
Shift+Esc+Accesskey 확인+Accesskey

웹 제작자의 접근키 제공방법

웹 페이지 제작자는 접근키를 제공할 때 HTML 코드를 다음과 같이 작성합니다. 접근키는 알파벳과 숫자 및 일부 특수문자키가 가능하며 DTD와 무관하게 대소문자를 구분하지 않으나 보통 대문자 ‘I(아이)’ 와 소문자 ‘l(엘)’은 모양이 같아서 혼동될 수 있으므로 대문자 사용을 권장 합니다.

<input type="text" accesskey="S" title="검색" />
<input type="text" accesskey="L" title="로그인 ID" />

저희 웹 표준화팀에서는 웹 접근성에 관한 R&D를 진행하면서 ‘키보드 접근키‘에 관하여 정리한 내용이 있으므로 함께 참고해 보실것을 권합니다. 그 밖에 웹 브라우저에 할당된 더 많은 사용자 편의 키 목록들에 대하여 알고 싶으시면 ‘나에게 잘 맞는 웹 브라우저 선택하기‘ 라는 글도 도움이 되실것 같습니다.

분류: 웹 기획,웹 접근성,웹 표준 | 2008년 5월 15일, 3:27 | 정찬명 | 댓글: 11개 |
트랙백URI - http://naradesign.net/wp/2008/05/15/141/trackback/

11개의 댓글이 있습니다.

  1. 정찬명의 생각…

    ‘Opera와 Safari는 왜 Tab Navigation이 안될까요?’…

  2. 신현석 댓글:

    맥용 사파리에서 기본설정을 변경하지 않고 링크를 키보드로 탐색하려면 옵션키와 탭키를 같이 이용하면 됩니다. 윈도우용은 이미 예약이 되어 있는 단축키여서 옵션 설정없이 되는지 잘 모르겠네요.

  3. 정찬명 댓글:

    현석님 말씀을 듣고 보니 제가 윈도우 Safari 기준으로 설명해 놓고 맥용 Safari에 대한 설명을 안했군요 ㅡㅡ; 윈도우용에서는 Option키가 없어서 Option+Tab에 해당하는 기능을 사용하려면 저 기능에 체크를 해제하고 Tab키를 사용해야 됩니다. 의견 감사합니다.^^

  4. 윤태성 댓글:

    탐색키 탐색키 하니까 예전에 봤던 탐로드니와 빌게이츠 유머가 생각나는군요..

  5. 정찬명 댓글:

    빌게이츠가 탐로드니를 욕보이고자 윈도우에 탐색기를 넣었다는 그 유머 말씀하시는 거로군요 ㅋㅋ

  6. 신승식 댓글:

    그러나 오페라, 사파리, 인터넷 익스플로러 모두 탭 네비게이션을 하는 데 중대한 결함을 가지고 있습니다. 페이지 내부 링크(within page link 또는 same page link)로 이동을 시키면 화면 뷰(view)는 이동을 하지만 실제 초점(focus)는 이동하지 않지요. 따라서 키보드 사용자를 위한 소위 바로 가기 링크(skip navigation link)는 제대로 작동하지 않는 경우가 많습니다. 다행히 주요 화면 읽기 프로그램(screen reader)에서는 이를 보완해주고 있기도 하고, 인터넷 익스플로러의 경우 사용자가 많다 보니 이것을 해결하는 방법도 여러 가지가 있지만 오페라와 사파리의 경우는 그렇지가 않지요.

  7. 페이지 내 링크와 브라우저…

    페이지 내 링크(within page link, same page link)란 한 웹 페이지 안에서 이동하는 링크입니다. 많이 쓰는 곳은 FAQ나 법 조항처럼 페이지 위쪽에 목차나 목록이 먼저 나오고 하나를 선택하면 그것과 ….

  8. 김주원 댓글:

    tab흐름을 생각해 머리싸메며 만든 markup…
    Opera는 ..포커스가 있는 위치에서 상하좌우로만 이동하니 많이 무안합니다.

  9. 정찬명 댓글:

    신승식님 안녕하세요? 아주 중요한 코멘트에 감사드립니다. IE에서만 그런 문제가 있는줄로만 알고 있었는데 Firefox를 제외하고 나머지 브라우저들이 모두 동일한 버그를 가지고 있었군요. 친절하게 예제페이지까지 만들어 주시고 트랙백까지 걸어주셔서 쉽게 문제를 확인할 수 있었습니다. 감사합니다.

  10. 정찬명 댓글:

    김주원님 안녕하세요? Opera에서 Shift+(방향키)를 사용했을때는 말씀하신 것과 같이 작동하지만 A, Q키를 사용하시면 그렇게 작동하지 않습니다. A는 순수한 HTML구조순서대로 탐색하고 Q는 역순으로 탐색하거든요. Opera에서 A, Q키는 IE, Firefox의 Tab, Shift+Tab과 동일하게 작동합니다. 감사합니다.

  11. 작은아이의 생각…

    Opera와 Safari는 왜 Tab Navigation이 안될까요? (via. NARADESIGN:BLOG)…

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님