널리

안녕하세요. 펄님입니다.
널리 개편 개발일지 1탄을 쓴 지 벌써 한달이 다 되어가네요. 그동안 좀 게을렀던 것 같습니다.^^;;
오늘은 널리 개편 개발일지 2탄! 널리의 편리한 키보드 네비게이팅에 대해 이야기해보려고 합니다.

스킵 네비게이션 제공하기

널리에 들어온 다음, 키보드로 네비게이팅을 하기 위해 [Tab]키를 누르면 그림 1과 같이 어두운 배경의 콘텐츠가 생기게 됩니다. 이 콘텐츠의 역할은 스킵 네비게이션(Skip Navigation)입니다. 헤더 부분의 반복되는 정보를 건너뛰고 본문으로 바로 이동하게 합니다.

스킵 네비게이션을 제공해야 한다는 것은 WCAG 2.0 과 KWCAG 2.0 의 2.4.1 항목에서 다루고 있습니다.

[WCAG 2.0] 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)

[KWCAG 2.0] 2.4.1 (반복 영역 건너뛰기): 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

원래 스킵 네비게이션은 스크린리더 사용자를 고려한 것이었습니다. 눈으로 웹 콘텐츠를 한 번에 인식할 수 있는 사용자와 달리, 스크린리더의 음성 출력을 하나 하나 들어야 하는 사용자에게는 단순한 네비게이션조차도 다음 콘텐츠로의 접근을 무척이나 지연시키기 때문입니다. 스크린리더 사용자만을 고려한 스킵 네비게이션은 눈에 보이지 않는 형태였습니다. 그러나 키보드로 네비게이팅을 하는 사용자에게도 본문 콘텐츠에 빠르게 접근할 수 있도록 하는 것이 좋다는 인식이 생기면서 키보드 접근 시 눈에 보이도록 제공하게 되었습니다.

널리의 스킵 네비게이션 구현을 위한 HTML은 코드 1과 같습니다. 먼저 본문으로 건너뛰기 위한 링크는 어떤 콘텐츠보다도 먼저 선언되어야 합니다. 만약 스킵 네비게이션보다 먼저 제공되는 내용이 있다면 반복되는 콘텐츠가 생기게 될 테니까요-
링크의 목적지는 당연히 본문으로 지정되어야 하겠죠? 널리의 본문은 <div id="content"> 요소 안에 포함되어 있기 때문에 링크의 목적지는 #content가 됩니다.

<a href="#content">본문으로 이동하시려면 엔터를 누르세요.</a> ... <div id="content">

스킵 네비게이션을 위한 CSS는 코드 2와 같습니다. 첫 행은 기본 스타일입니다. 눈에 보이지 않는다고 해서 display:none 속성을 주게 되면 스크린리더 사용자가 스킵 네비게이션을 인식할 수 없습니다. 따라서 크기를 줄이고 콘텐츠가 넘치지 않게 overflow:hidden 속성을 줍니다. 이 때 width와 height의 크기를 1px로 잡은 것은 0일 경우 키보드 포커스가 닿지 않기 때문입니다.
둘째 행은 키보드 포커스가 닿았을 때의 스타일입니다. 눈에 보이지 않던 콘텐츠를 눈에 보이도록 높이와 너비를 재지정하고 폰트 크기나 행간을 조절하였습니다.

#skipnav a{display:block;overflow:hidden;height:1px;width:1px;margin:0 -1px -1px 0;font-size:0;line-height:0} #skipnav a:focus{width:auto;height:32px;margin:0;padding:15px 0 0 15px;background:#20262c;font-size:1.25em;font-weight:700;line-height:1;color:#fff;text-decoration:none;outline:none}

조금 안타까운 점은, 웹킷계열의 브라우저에서 해시(#) 링크의 키보드 포커스 이동이 되지 않는다는 것입니다.
이 내용은 버그로 접수된 바 있지만 아직 고쳐지지 않았습니다. 자세한 내용은 아래 경로를 참고해주세요.
http://code.google.com/p/chromium/issues/detail?id=73302>

키보드 단축키 제공하기

그림 1에서 처럼 스킵 네비게이션 오른쪽에는 키보드 단축키 정보가 제공되고 있습니다. 널리에서 제공되는 키보드 단축키는 총 네개로 코드 3과 같이 HTML의 accesskey 속성을 사용한 것입니다.

<a href="blog" accesskey="3">Blog</a>

accesskey 속성을 사용한 단축키는 '3'이라는 단축키가 제공되었다고 해서 '3'을 누르면 바로 작동되지 않습니다. 사용하고 있는 브라우저에서 요구하는 키 조합이 있으며 표 1에서 확인하실 수 있습니다. 만약, 현재 사용하고 있는 브라우저가 윈도우의 크롬이라면 널리의 블로그 단축키 활성화를 위해 Alt + 3 을 눌러야 한다는 것이죠.^^

여기서 눈여겨볼 것은 단축키에 할당된 문자가 단축키를 연상하기 쉬운 영어가 아닌 숫자, 특수문자라는 점입니다. 단축키를 제공할 때 꼭 유의해야 할 점은 브라우저나 스크린리더에서 미리 제공하고 단축키와 충돌하지 말아야 한다는 것입니다. 웹 콘텐츠의 접근성 향상을 위해 브라우징 도구의 접근성을 떨어뜨리면 안되니까요. 특히 브라우저와 스크린리더에서 제공되는 단축키는 영문키에 많이 할당되어 있습니다. 그래서 웹 콘텐츠에 단축키를 제공한다면, 숫자나 특수문자키를 활용하는 것이 좋겠죠. 이런 측면에서, 키보드 단축키는 여러모로 사용자 학습이 필요한 부분인것 같습니다.

키보드 포커스 강조하기

키보드 접근성을 보장하기 위해서는 포커스를 시각적으로 표시하는 것이 매우 중요하고, 이 내용 역시 KWCAG 2.0 의 2.1.2 항목에서 다루고 있습니다.

[KWCAG 2.0] 2.1.2 (초점 이동) 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.

물론 브라우저들은 기본적으로 그림 2와 같이 키보드 포커스를 시각적으로 표시해주고 있습니다. 사파리나 오페라의 경우 매우 명확하게 표현되고 있으며, IE나 파이어폭스는 구분이 다소 어렵습니다.

널리에서는 그림 3과 같이 모든 브라우저에서 동일한 키보드 포커스 표시를 제공하고자 키포드 포커스 표시가 되어야 하는 <a>, <input>, <button>, <textarea>에 {outline:3px solid #d7f07f} 스타일을 지정해주었습니다. 웹 페이지의 전체적인 미관을 해치지 않으면서도 눈이 피로하지 않은 색감을 찾느라 살짝 어려움도 있었어요.^^;

키보드 접근성에 대해서만 이야기를 했는데도 내용이 꽤 많네요. ^^;
다음에는 또 다른 접근성 이야기를 들고 나타나겠습니다~