접근성을 높여주는 네비게이션

올블로그에 포스팅된 SKT 모바일 웹과 웹표준이라는 글을 보고 호기심에 핸드폰을 열고 블로그에 접속해 봤습니다. 별 기대를 안했는데 의외로 제 핸드폰에 탑재된 KUN(KTF Unified Navigator) 브라우저가 블로그 글을 잘 보여주더군요. 물론 이미지가 제대로 표시되지 않는 문제가 있지만 글 검색도 가능하고 댓글도 달 수 있었습니다. 데이터 통신 요금이 생각보다 훨씬 비싸서 다양하게 시험해보진 않았지만 잠깐 동안의 사용으로도 웹 문서의 접근성이 왜 중요한지를 체험할 수 있었습니다.

제가 느꼈던 모바일 기기를 통한 웹 서핑의 가장 큰 불편함은 마우스를 사용할 수 없다는 점이었습니다. 원하는 링크로 이동하기 위해서는 중간에 있는 모든 링크를 순차적으로 거쳐가야 했으니까요. 이런 불편함을 느끼다가 텍스트패턴 기본 테마에 있는 네비게이션 메뉴가 왜 포함된 것인지 깨달았습니다. 먼저 어떤 메뉴인지 소개하는게 좋겠네요.

<div id="accessibility">
  <ul>
    <li><a href="#content">내용 바로가기</a></li>
    <li><a href="#sidebar">사이드바 바로가기</a></li>
    <li><a href="#search">검색 바로가기</a></li>
    <li><a href="#comment">댓글 바로가기</a></li>
  </ul>
</div>

제 블로그에 맞게 약간 수정한 마크업인데 페이지의 중요한 부분으로 바로 접근할 수 있는 간단한 링크로 구성되어 있고, html 문서의 body 태그 바로 아래에 들어갑니다. 다시 말해서 문서의 맨 앞에 나오는 부분이지요. 택스트패턴 기본 테마에 있는 이 마크업을 봤을때 꼭 필요한 부분이 아니라고 생각해서 지금까지 적용하지 않았었습니다. 그럼 이 div 태그의 스타일이 어떻게 지정되었는지 볼까요?

#accessibility { display: none; }

display 속성 대신 position: absolute; top: -10000px; 처럼 절대 위치를 사용할 수도 있습니다.

CSS 표준 규격에 따르면 display: none; 속성은 화면 뿐 아니라 스크린 리더에도 적용됩니다. 따라서 절대 위치(absolute positioning)을 이용하는 것이 옳은 방법입니다(2007년 8월 7일 추가).

이 메뉴는 CSS에 정의된 스타일에 의해서 일반적인 브라우저 환경에서는 보이지 않습니다. 하지만 문서에서 CSS가 제거되었을 경우에는 메뉴 리스트로서 화면에 보여지게 되지요. 예를 들기 위해서 오페라 브라우저의 ‘작은 화면 보기’ 메뉴로 이 페이지를 열었을 때 어떻게 보이는지를 스크린샷으로 첨부했습니다.

핸드폰에 탑재된 브라우저가 CSS를 적용하지 않고 문서를 보여주기 때문에 실제 핸드폰으로 보는 화면과 이 이미지가 거의 비슷합니다. 이렇게 문서 맨 앞에 네비게이션 메뉴가 있으면 사이드바나 댓글로 이동하는게 훨씬 쉬워지겠지요. 그런데… 테스트를 해보니 KTF의 모바일 브라우저가 문서 내에 포함된 책갈피(anchor)로의 바로가기를 지원하지 않더군요. 제대로 보이기는 하는데 링크를 눌러도 아무 반응이 없습니다^^;

그렇다고 해서 무의미한 마크업은 아닙니다. 스크린 리더를 이용할 경우에도 동일하게 적용될테니까요. 중간에 있는 여러 링크들을 거치지 않고 페이지의 다른 곳으로 바로 이동할 수 있는 수단을 제공하는 것은 접근성 향상에 큰 도움이 된다고 생각합니다. 게다가 간단하고 적용하기도 쉬운 방법이지요.

이런 방법 외에 html의 바로가기 키(accesskey) 속성을 사용해서 접근성을 향상시키는 방법도 있습니다. 하지만 모바일 기기에서는 알파벳 키를 적용하는데 어려움이 있고 브라우저가 자체적으로 지원하는 바로가기 키와 충돌할 가능성도 배제할 수 없습니다. 또한 인터넷 익스플로러와 파이어폭스, 오페라 브라우저에서 accesskey를 이용하는 방법이 제각각이라는 점도 이 속성을 사용하는데 방해물이 됩니다. 물론 접근성 향상을 위해서 만들어진 속성인 만큼 잘 적용하면 좋은 효과를 얻을 수 있다고 하네요. 이런 방법에 대해서는 이 페이지를 참고하시기 바랍니다.

마지막으로 주제와 직접적인 관련은 없지만 KTF 모바일 브라우저의 문제점을 하나 지적하고 마치겠습니다. 많이 사용되는 접근성을 높이기 위한 방법 중의 하나가 html label 태그를 사용하지 않는 텍스트 입력 폼에 alt 속성을 사용해서 대체 문자열을 지정하는 것입니다. 그런데 KTF 모바일 브라우저는 대체 문자열이 있으면 해당 요소 대신에 무조건 대체 문자열만을 보여주더군요. 그래서 왼쪽 상단의 검색 폼에 alt 속성을 지정할 경우에는 검색 기능을 아예 사용할 수 없었습니다. 그러니 혹시라도 핸드폰으로 접근한 자신의 블로그에서 어떤 폼을 사용할 수 없다면 alt 속성이 지정되었는지 확인해 보시기 바랍니다.

댓글 4개가 달렸습니다. 태그: , , , ,

  1. 부침개 | 2007-11-21 03:11

    스킵네비게이션 에 대해 그리고 모바일 환경을 예로 접근성에 좋은 설명 감사합니다.
    스킵네비게이션에 좀 더 이야기하자면 모바일에서는 적용이 안되겠지만
    lynx나 w3m과 같은 텍스트 브라우저나 스크린리더에서는 유용하게 사용 됩니다.
    물론 일반 브라우저에서두요...
    근데 저도 몇달전에 안 내용이지만 프레그먼트 식별자를 이용하는 방식인

    <a href="#id_name">go contents</a>
    .
    .
    <h3 id="id_name">contents title...</h3>

    이런 방식을 사용한다고 해도 스크린리더에서는 인식하지 않는다더군요 이것이 국산스크린리더인 센스리더만이 그런것인지는 모르겠지만 스크린리더에서도 동작이 가능하게 하려면 #id_name 이 가리키는곳이 id 값이 아닌 name 값이여야 한다고 합니다.
    하지만 태그중 name 속성을 허용하는 태그는 많지가 않은데, 주로 a 태그를 이용해서 그 역활을 대신 한다고 합니다. 그래서 내용에 a 태그를 한번 더 감싸서 거기에 name 을 적어서 이동 할 수 있도록 하는방법을

    <h3 id="id_name"><a name="id_name">contents title...</a></h3>

    사용하라고 하는것 같은데 이런 방식은 w3c 스팩이 있는 모든 페이지에 가장 상위에 있는 목차 링크를 클릭했을때 이동되는 곳에 코드를 보면 그런 식으로 구성이 되어있어서 신뢰가 가는 방법이 아닐까 생각이 되네요..

  2. 부침개 | 2007-11-21 10:22

    코드를 넣으려고 했는데 이렇게 나올줄은 몰랐네요 :)
    <p>와<code> 태그는 빼야할것 같아요.. ^^;;;

  3. wystan | 2007-11-21 20:29

    <P>와 <code> 태그는 수정했습니다. :-)

    알려주신 것처럼 페이지 내 책갈피(Anchor) 링크에는 id와 name 속성을 함께 지정하는 것이 호환성을 높이는 최선의 방법인 것 같습니다. W3C가 name 속성을 금지(deprecate)시키지 않은 것도 그런 이유 때문이라 생각되네요.

    조만간 블로그 정비할 때 name 속성을 넣고 핸드폰으로 다시 테스트해봐야 겠습니다.
    좋은 정보 알려주셔서 감사드려요~

  4. k2five | 2009-08-30 23:47

    wystan님 좋은 정보 감사드립니다..^^

댓글이 닫혔습니다.