디자인에 민감한 사람들의 이야기를 듣다보면 많은 이들이 일반 링크나 대체 이미지로 치장된 링크를 눌렀을 경우 보여지는 링크 둘레의 점선을 없애달라는 요구를 많이 한다. 하지만, 이는 키보드 접근성을 해치는 경우라서, 그대로 놔두거나 적어도 링크 옆으로 삐져 보이는 점선을 없애는 조치 – a {overflow: hidden;} – 만을 권하고 있다.
요 점선의 목을 쥐고 있는 놈이 바로 outline이란 놈인데, 민감한 디자이너와 접근성 우선 옹호자 모두가 만족할 수 있는 문제의 해결 방법이 공개되었다. Opera에 속해 있는 Patrick씨가 future of web design tour 2009에서 행한 키보드 접근성에 관한 프리젠테이션에 있는 내용인데, 핵심은 적절한 상황(키보드 focus를 방해하지 않는 마우스 클릭)에서만 이 outline을 없애서 키보드 접근성을 해치지 않으면서도 링크 선택시 보여지는 점선의 둘레를 없애라는 것이다.
코드로 보면 너무나 간단하다.
물론, 여기서 일반 a 태크의 outline property는 건드리지 않는 것이 중요하다.
너무나 단순하지만, 잠시라도 깊이 생각해보질 않아서 이렇게 쉬운 해결책을 그 동안 그냥 지나쳐 버렸던 것일까?
이미지 대체 링크를 마우스나 키보드를 사용해서 선택했을 때 여러 경우의 수를 조합해서 비교해 놓은 실험 페이지에서 최적의 결과를 직접 확인할 수 있다.
마지막으로, Patrick씨 행한 프리젠테이션 슬라이드(pdf)에 나와있는 맺음말을 옮겨놓는다.
if you style :hover, also :focus and :active
don’t suppress outline completely (reintroduce :focus and suppress :active)
leave tabindex alone – source order
JavaScript on hover (mouseover/mouseout) also on focus/blur (if focusable element)
lightboxes and their problems
only attach behaviour to focusable elements
“키보드의 접근성을 해치지 않고 클릭 했을 때의 링크 점선 없애는 법”에 달린 한 개의 댓글
[…] 방법을 조금 전 키보드의 접근성을 해치지 않고 클릭 했을 때의 링크 점선 없애는 법에서 발견하였는데, 역시나 IE에선 작동하지 […]