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

2010.05.23 08:14

Elkha 조회 수:4019

참고 문서  

focus.jpg

깔끔함, 참을수 없는 유혹

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

Javascript

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

CSS

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

[질문]

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

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

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



[답변]

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

포커스 영역 테두리 유무
번호 제목 날짜 조회 수
29 접속하기전에.. 2011.04.01 2183
28 마인크래프트 다운로드 v1.4 2011.04.01 3222
27 <table cellspacing="0"> 2010.08.19 5295
26 브라우저, 문서 높이 구하기 2010.08.17 3770
25 네이버 드래그, 마우스 우클릭 방지 해제 file 2010.07.25 3372
24 ftp file 2010.07.23 13890
23 javascript 대기시간 - setTimeout file 2010.06.12 12911
22 php + ssh2 file 2010.06.05 19972
21 Table 태그 file 2010.05.23 4118
» 포커스 요소의 테두리와 웹 접근성 file 2010.05.23 4019
19 리눅스 자동 시작 file 2010.05.21 15709
18 putty file 2010.05.21 13294
17 php 에서 파일 권한 설정 2010.05.21 4365
16 list-style file 2010.05.21 4872
15 jQuery 쿠키 file 2010.05.19 4575
14 php 쿠키 생성, 읽기 file 2010.05.19 6311
13 php 에서 텍스트 파일을 생성, 수정하기 file 2010.05.19 7859
12 파일 불러오기 file 2010.05.17 5252
11 php 암호화와 복호와 file 2010.05.17 6862
10 php 현재 시각 출력하기 file 2010.05.17 3873