NARADESIGN

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


메뉴 건너 뛰기 링크(Skip Navigation).

본문 건너 뛰기

메뉴 건너 뛰기 링크란 하나의 웹 사이트에서 모든 페이지에 걸쳐 반복해서 등장하는 글로벌 네비게이션과 로컬 네비게이션을 건너 뛸 수 있는 링크를 말합니다. 마우스를 함께 사용하는 사람은 이 링크가 왜 필요한지 알기 어렵지만 키보드만으로 웹을 탐색하는 사람들에게는 상당히 중요한 의미를 갖습니다.

2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A) 2.4.1 블럭 우회: 여러 웹 페이지에서 반복되는 콘텐츠 블럭을 우회할 수 있어야 한다. (수준 A)

WCAG 2.0 : 2.4.1

헤딩은 콘텐츠 블럭을 우회하는 가장 효과적인 방법

시각 장애인은 마우스 포인터를 볼 수 없기 때문에 키보드만으로 웹을 탐색을 합니다. 물론 Tab키와 방향키 만으로 탐색을 하는 것은 아닙니다. 화면 낭독 프로그램은 ‘링크만, 헤딩만’ 따로 모아서 탐색할 수 있고 특히 ‘링크’ 텍스트를 설명력 있게 제공하는 것도 당연히 좋지만 적절한 ‘헤딩’을 제공하는 것은 더더욱 중요합니다. 헤딩은 콘텐츠 블럭을 건너 뛸 수 있는 단서가 되기 때문이고 시각 장애인에게는 불필요한 콘텐츠를 잘 건너 뛰게 해주는 것이 매우 중요합니다. 시각이 있는 사람들도 자각하지 못하는 사이에 이미 불필요한 콘텐츠를 무시하는 것에 학습되어 있습니다. 눈에 잘 띄도록 만든 배너를 빠르게 무시하는 것은 방법이라기 보다 본능적인 반응에 가깝습니다. 헤딩은 콘텐츠 블럭을 우회하는 가장 효과적인 방법 입니다.

반복되는 콘텐츠 블럭을 우회하는 방법

콘텐츠와 콘텐츠 사이를 빠르게 건너뛰기 위하여 시각 장애인에게 헤딩(h1, h2, h3, h4, h5, h6) 정보가 중요하다는 사실을 말씀드렸습니다만 사실 오늘의 주제는 ‘메뉴 건너 뛰기’ 입니다. 메뉴에 헤딩을 제공하는 사람은 별로 없고 제공해야 한다는 지침도 없으며 오히려 제공했을 때 더 어색하고 불편할 수 있습니다. 따라서 메뉴에는 보통 헤딩이 없습니다. 하지만 한 두 페이지 정도만 탐색해 보면 시각이 있고 없고를 떠나서 누구나 그것이 메뉴라는 것을 알게 됩니다. 같은 패턴의 데이터가 반복 되기 때문입니다.

한빛고등학교는 웹 사이트는 모든 페이지에 메뉴 건너 뛰기 링크를 제공하고 있다

이렇게 모든 페이지마다 지속적으로 반복되는 네비게이션들을 키보드 사용자는 어떻게 탐색해야 할까요? Tab키를 계속 누르고만 있어야 할까요? 다 필요해서 있는 것이니 반복 되더라도 계속해서 탐색하고 듣고 있어야 하는 것일까요? 아닐껍니다. 건너 뛸 수 있는 장치를 제공해 주어야 합니다. 이미 위에서 ‘WCAG 2.4.1′ 구절을 인용했지만 블럭을 우회할 수 있어야 한다는 지침은 ‘수준 A’ 입니다. 수준 A는 최소한 지켜야 하는 수준으로써 가장 중요하다는 의미와 맞닿아 있습니다. 우리는 반복되는 콘텐츠 블럭을 건너 뛸 수 있도록 하기 위하여 ‘메뉴 건너 뛰기’ 링크를 제공할 수 있습니다.

메뉴 건너 뛰기 링크에 관한 쟁점

메뉴 건너 뛰기 링크를 제공해야 한다는 의견에는 거의 모든 웹 접근성 전문가들이 동의하지만 그것을 제공하는 방법에는 크게 다음과 같은 세 가지 다른 구현 방법이 있습니다.

  • 메뉴 건너 뛰기 링크는 시각이 있는 사람도 볼 수 있도록 웹 페이지 최 상단에 항상 노출해야 한다.
  • 메뉴 건너 뛰기 링크는 시각이 있는 사람에게는 방해가 되므로 숨김 처리하고 키보드가 접근할 때에만 노출해야 한다.
  • 메뉴 건너 뛰기 링크는 시각이 있는 사람에게는 방해가 되므로 항상 숨김 처리 해야 한다.

여러분은 어떤 의견에 동의 하시나요? 저는 두 번째 방법을 가장 좋은 방법이라고 생각하고 있습니다. 만약 여러분이 ‘네이버’ 웹 페이지를 개발한다면 여러분들은 모든 네이버 웹 사이트 최 상단에 ‘메뉴 건너 뛰기’ 링크를 넣어야 한다고 생각 하시나요? 저는 그렇게 생각하지 않습니다. ‘메뉴 건너 뛰기’ 링크는 시각이 있는 사람에게는 오히려 건너 뛰고 무시해야 할 콘텐츠가 됩니다. 마우스를 조작하는 사람에게 이 링크는 필요치 않으니까요.

그렇다고 해서 항상 숨김 처리 하는 것도 문제가 됩니다. 왜냐하면 시각 장애인만 이 링크를 사용하는 것은 아니기 때문 입니다. 시각은 있지만 손과 발을 자유롭게 사용할 수 없는 지체 장애인은 마우스 스틱이라는 빨대 모양의 막대를 이용해서 키보드만으로 웹을 탐색 합니다. 손과 발이 자유롭지 못하기 때문에 입에 막대를 물고 키보드를 두드립니다. 메뉴 건너 뛰기 링크에 접근 했을 때 링크가 화면에 보여야 하는 이유는 이렇게 시각은 있지만 키보드만을 사용할 수 밖에 없는 장애인들에게 유용하기 때문 입다. 간혹 TV에서 팔이 없는 지체 장애인이 발로 마우스를 조작하는 모습을 본 기억이 있으실 껍니다. 하지만 발이 있다고 해서 모든 지체 장애인이 발로 마우스를 자유롭게 조작하는 것은 아닙니다.

키보드 사용자에게만 유용한 메뉴 건너 뛰기 링크

키보드 사용자에게만 유용한 메뉴 건너 뛰기 링크 예제를 만드는 것은 정말 쉽습니다. 자바스크립트는 필요치 않고 HTML과 CSS만으로 가능합니다. <a> 요소의 width, height, overflow 속성을 조절해서 기본적으로 화면에 보이지 않도록 처리한 다음 a:focus 상태일 때에는 width, height 값이 auto가 되도록 처리하는 것입니다.

키보드 접근시에만 메뉴 건너 뛰기 링크가 화면에 보이는 예제 – 이 예제를 새 창으로 보기

글로벌 네비게이션을 본문 콘텐츠보다 늦게 마크업 하는 경우

글로벌 네비게이션을 본문 콘텐츠보다 나중에 마크업 하는 경우도 있습니다. 화면에 보이는 것과 마크업 순서를 다르게 처리 한다고 해서 항상 논리적인 순서가 잘 못 되었다고 말 할 수는 없습니다. 지금 제가 사용하고 있는 Textyle 블로그와 WordPress 블로그는 모두 본문 콘텐츠가 먼저 마크업 되고 글로벌 메뉴가 나중에 마크업 되어 있습니다. 이런 경우라면 ‘메뉴 건너 뛰기’ 링크보다 ‘본문 건너 뛰기’ 링크가 더 적절할 것이고 나아가 ‘건너 뛰기 링크’는 생략해도 됩니다. 본문 콘텐츠는 모든 페이지에서 반복되는 내용도 아니고 많은 링크가 포함되어 있지도 않기 때문 입니다.

지나치게 많은 ‘** 건너 뛰기’ 제공은 오히려 공해

반복되는 블럭을 건너 뛰어야 한다는 지침을 잘 못 이해해서 모든 웹 페이지 상단에 굉장히 많은 ‘** 건너 뛰기’ 링크를 제공하는 경우가 있습니다. 이것은 오히려 건너 뛰어야 할 공해 콘텐츠가 됩니다. 건너 뛰어야 할 것은 ‘반복되는 블럭’인데 마치 한 페이지의 ‘목차’ 처럼 제공하는 경우가 있다는 것입니다. 건너 뛰기 링크는 보편적인 경우에 ‘메뉴 건너 뛰기’ 하나면 충분 합니다. 한편 모든 페이지에서 반복되지는 않지만 상당히 많은 버튼이나 링크가 존재한다면 해당 블럭을 건너 뛸 수 있도록 건너 뛰기 링크를 제공하는 것이 좋습니다.

네이버 뉴스 클러스터링 - 키보드가 접근 할 때 화면에 보이는 메뉴 건너 뛰기 링크

메뉴 건너 뛰기에 관한 더 많은 의견들

분류: CSS,웹 기획,웹 디자인,웹 접근성,웹 표준 | 2010년 3월 13일, 3:11 | 정찬명 | 댓글: 17개 |
트랙백URI - http://naradesign.net/wp/2010/03/13/1221/trackback/

17개의 댓글이 있습니다.

  1. 마누말하길

    처음 Skip Navagation 을 추가했을 때에는 많으면 많을 수록 좋으리라 판단하여 각 블럭으로 이동할 수 있는 Anchor 를 추가하곤 했었지요. 하지만 이러한 판단이 공해를 잃으킨다는 것을 후에 알게되고 나중에는 메뉴만 건너뛸 수 있도록 추가하게 됐습니다.
    천천히 읽어보니 많이 도움이 됩니다. 좋은 포스팅 감사합니다 ㅎㅎ
    ps. 그나저나 스크린샷은 보는 저로 하여금 손발이 오그라들도록 하십니다 ㅠ

  2. 정찬명말하길

    @마누
    저도 제 블로그에 바로가기 링크를 여럿 넣어 놨다가 전부 지웠습니다.
    한빛고등학교 정말 굿이네요. ㅎㅎ

  3. darkdevil말하길

    항상 좋은 정보 얻어 가네요…^^
    그리고 글도 퍼가도 되나요???맘대로 가져가는건 그러니…답변 주시면 그때 퍼갈께요…

  4. 정찬명말하길

    @darkdevil
    제 글은 블로그 하단에 이용 허락 조건이 명시되어 있습니다.
    저작자 표시, 비영리, 변경금지 조건이 맞는다면 얼마든지 퍼가셔도 됩니다.
    감사합니다. ^^

  5. […] 메뉴 건너 뛰기 링크(Skip Navigation). […]

  6. 윤군말하길

    오늘도 좋은거 알아갑니다~ 감사~!

  7. 마누말하길

    “메뉴 건너 뛰기에 관한 더 많은 의견들”에서 양군 팩토리의 링크 값이 잘못 되어있네요 ^^
    http://http:// 로 되어있어요 흐흐.. 오류 발견 ㅎㅎ

  8. 정찬명말하길

    @마누
    훌륭한 예제도 제공해 주시고 오류까지 잡아주시고 완전 감사합니다. ^^

  9. '-')!말하길

    웹접근성이 뭔지 잘 모르는 상태에서 이것저것 보고 있는데,
    이게 무슨내용인지 잘 몰랐는데 여기서 보고 바로 알아갑니다.
    설명이 너무 잘 되어 있네요 감사해요~

  10. demun말하길

    저도 티스토리 블로그 스킨을 만들때는 몰랐는데….
    왜냐면 아무도 건너뛰기를 만들지 않더라구요.. 나중에 xe 스킨을 만들때 많이들 만들어서 현재는 저도 블로그 스킨에 건너뛰기를 사용합니다.

    좋은 글 잘봤습니다.

  11. 정찬명말하길

    @demun
    메뉴 건너뛰기 기능을 제공하는 경우 스킵 메뉴 링크는 화면에서 반드시 면적을 차지하고 있어야 합니다. 면적을 차지하지 않으면 키보드가 아예 접근이 되지 않는답니다. 그리고 키보드로 접근할 때 화면에 보여야 유효합니다. 시각 장애인 뿐만 아니라 상지 장애인(팔이 없거나 불편한)이 볼 수 있어야 하기 때문입니다. ^^

  12. […] 출처 : 나라디지인 […]

  13. L2말하길

    예제 페이지의 메뉴 건너뛰기 링크가 IE 10에서 작동하지 않아요ㅜㅜ
    Tab 키를 누르면 링크가 나타나기는 하지만 작동하지는 않습니다…
    제 PC 환경에서만 이러는 것인가요, 아니면 IE 버그인가요?다른 브라우저에서는 되는데 IE 10에서만 이러네요 X0

  14. L2말하길

    +크롬에서도 안 되네요ㅠㅠ

  15. 정찬명말하길

    @L2
    브라우저들이 제대로 구현을 해놓지 않았거나 브라우저 버그입니다. 자바스크립트로 키보드 초점을 바로잡아야 합니다.

  16. L2말하길

    앗 그렇군요…! 자바스크립트… 초점… 어떻게 해야 할지 검색도 막막하지만 브라우저가 구현을 안 했다니 어쩔 수 없겠네요ㅠ 감사합니다!

  17. 정찬명말하길

    @L2
    jQuery를 사용하신다면 아래와 같은 코드로 링크 목적지에 초점을 넣어줄 수도 있습니다.

    jQuery(function($){
        $('a[href^=#]').click(funciton(){
            $($(this).attr('href')).attr('tabindex','0').focus();
        });
    });
    

댓글 쓰기

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

필수 아님

필수 아님