html 포커스 요소의 테두리와 웹 접근성

2010.05.23 08:14

Elkha 조회 수:4063

참고 문서  

focus.jpg

깔끔함, 참을수 없는 유혹

anchor, button 등의 태그를 클릭하게 되면 바깥 라인이 찍혀 보인다. 이 테두리는 마우스 사용이 제한된 환경에서 사이트를 탐색하는데 탁월한 역할을 수행한다. 나 역시 마우스를 사용하지만 테두리가 있는 덕에 조금은 안정적인 느낌을 받는다. 그런데 웹 디자인을 하면서 테두리를 싫어하는 사람들을 종종 본적이 있다. 사이트의 미관을 헤치거나 깔끔한 느낌을 더 하기 위한 이유인 것 같다.

Javascript

onfocus="this.blur();"
이 스크립트가 들어간 요소는 키보드 탐색이 완전히 불가능하다. 요소를 선택(focus)하는 순간 해제(blur) 행동을 취하기 때문이다. 스크립트를 통해 테두리를 숨기는 방법은 최악의 접근성을 자랑한다.

CSS

스타일 서식을 사용하여 바깥 라인을 숨기는 방법이다. 한때 나도 즐겨쓰던 방법으로 접근성을 헤치지 않는다고 생각했었다. 거치적거리는 테두리를 없애고 접근성도 지키고 일석이조 아닌가? 하지만 실상은 그렇지 않더라.

[질문]

css를 이용해서 포커스 테두리를 보이지 않게 할 수 있습니다.

이럴 경우 접근성에 좋지 않은 영향이 있을 수 있나요?

스크립트를 사용하지 않은 경우입니다.



[답변]

CSS든 스크립트든 포커스 테두리를 보이지 않게 하는 것 자체가 접근성에 좋지 않습니다.
상지 장애 등의 이유로 키보드만을 이용해 컴퓨팅을 하는 경우 포커스가 현재 사용 중인 기능을 나타내주기 때문입니다.

포커스 영역 테두리 유무
번호 제목 날짜 조회 수
31 마인크래프트 조합 2 file 2011.04.01 14347
30 마인크래프트 조합법 1 file 2011.04.01 19573
29 접속하기전에.. 2011.04.01 2235
28 마인크래프트 다운로드 v1.4 2011.04.01 3269
27 <table cellspacing="0"> 2010.08.19 5365
26 브라우저, 문서 높이 구하기 2010.08.17 3819
25 네이버 드래그, 마우스 우클릭 방지 해제 file 2010.07.25 3473
24 ftp file 2010.07.23 13961
23 javascript 대기시간 - setTimeout file 2010.06.12 12983
22 php + ssh2 file 2010.06.05 20047
21 Table 태그 file 2010.05.23 4179
» 포커스 요소의 테두리와 웹 접근성 file 2010.05.23 4063
19 리눅스 자동 시작 file 2010.05.21 15774
18 putty file 2010.05.21 13343
17 php 에서 파일 권한 설정 2010.05.21 4450
16 list-style file 2010.05.21 4954
15 jQuery 쿠키 file 2010.05.19 4622
14 php 쿠키 생성, 읽기 file 2010.05.19 6472
13 php 에서 텍스트 파일을 생성, 수정하기 file 2010.05.19 8085
12 파일 불러오기 file 2010.05.17 5331