바로 가기 링크 연습: 키보드만 사용해 보세요.

들어가기에 앞서

이 페이지는 Internet Explorer Same-Page Links와 짐 때쳐의 Skip Navigation이라는 페이지를 전적으로 참고하여 만든 내용입니다. 여러 브라우저에서 키보드를 이용해서 페이지 내부의 링크를 이동한 후에 순서대로 페이지를 탐색할 수 있는지 시험해보기 위해 만들었습니다. (바로 가기 링크의 목표 지점에 반드시 <a>나 <div> 요소만을 써야 하는 것은 아니어서 여기에서는 <h2>를 목표 지점으로 하였습니다.)

정찬명님의 훌륭한 글에 브라우저별로 키보드 사용법이 나와 있으니 참고하십시오.

본문 1

저~ 위에 있는 본문 1 바로 가기 링크를 눌렀다면 여기로 브라우저가 시각적으로 이동합니다. 다시 말해 화면이 이곳으로 이동하지요. 넓은 화면에서는 잘 모를 것이고, 브라우저 크기를 작게 해놓으면, 이곳으로 이동하기 위해 스크롤바가 움직였을 것입니다. 그런데 여기에서 다시 다음 링크로 이동하는 키보드를 눌러보십시오. 파이어폭스를 제외한 대부분의 브라우저에서 아마 잘 안 될 것입니다.

본문 1 다음의 링크

본문 2

본문 2 바로 가기 링크를 눌렀다면 시각적으로는 이곳으로 이동을 하게 됩니다. 본문 1과 다르게 본문 2에서는 목표(target) 지점에 tabindex="-1"라는 속성을 주었습니다. 참 기발한 방법인 것 같습니다. 이렇게 하면 인터넷 익스플로러에서도 다음 링크로의 이동이 가능하게 됩니다.

본문 2 다음의 링크

본문 3

본문 3 바로 가기 링크를 눌렀다면 시각적으로는 이곳으로 이동을 하게 됩니다. 본문 1과 다른 점은 목표 주위를 <div style="width:100%;"></div>로 감싸주었다는 것입니다. 이것이 인터넷 익스플로러의 유명한 hasLayout 버그를 해결하기 위한 방법 중의 하나입니다. 즉 목표 지점을 감싸는 테이블이 되었든, div가 되었든 레이아웃을 만들 수 있는 것이 있어야만 초점이 제대로 이동한다는 것이지요. 설사 목표 지점 자체가 블록 요소(block level element)라고 하더라도 반드시 바로 바깥에 블록이 하나 더 있어야 됩니다. 이렇게 하면 인터넷 익스플로러에서도 다음 링크로의 이동이 가능하게 됩니다. 재미있는 것은 div를 넣더라도 width 스타일을 지정하지 않으면 안 된다는 것입니다. HTML의 작동이 스타일에 영향을 받다니!

본문 3 다음의 링크

본문 4: 본문 4 바로 가기 링크를 눌렀다면 시각적으로는 이곳으로 이동을 하게 됩니다. 목표 지점이 반드시 블록 요소이면 좋겠지만, 인라인 요소(inline element)일 경우에 레이아웃을 강제로 만들어주기가 무리일 수 있습니다. 그래서 div가 아닌 <span style="position:absolute;"><a id="main4" name="main4"></a></span>을 씌워주어도 본문 3과 같은 효과를 냅니다. 그러나 본문 1, 2, 3과 다른 점은 목표 지점 자체가 아닌 아무 내용이 없는 가짜 앵커를 만들어야 한다는 점에서 그리 깔끔한 방법은 아닌 것 같습니다.

본문 4 다음의 링크

이와 같이 했는데도, 여전히 오페라와 사파리에서는 페이지 내부 바로 가기 링크가 있을 때, 키보드로 링크들 사이의 이동을 제대로 할 수 있는 방법이 아직까지는 없는 것 같습니다. 인터넷 익스플로러는 위와 같은 방법을 쓰면 그나마 해결이 됩니다. 가장 정확하게 동작하는 브라우저는 파이어폭스입니다.

블로그 원본 글로 돌아가기