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

2010.05.23 08:14

Elkha 조회 수:4179

참고 문서  

focus.jpg

깔끔함, 참을수 없는 유혹

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

Javascript

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

CSS

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

[질문]

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

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

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



[답변]

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

포커스 영역 테두리 유무
번호 제목 날짜 조회 수
21 Table 태그 file 2010.05.23 4440
» 포커스 요소의 테두리와 웹 접근성 file 2010.05.23 4179
19 리눅스 자동 시작 file 2010.05.21 15892
18 putty file 2010.05.21 13464
17 php 에서 파일 권한 설정 2010.05.21 4593
16 list-style file 2010.05.21 5154
15 jQuery 쿠키 file 2010.05.19 5016
14 php 쿠키 생성, 읽기 file 2010.05.19 7103
13 php 에서 텍스트 파일을 생성, 수정하기 file 2010.05.19 9922
12 파일 불러오기 file 2010.05.17 5471
11 php 암호화와 복호와 file 2010.05.17 7305
10 php 현재 시각 출력하기 file 2010.05.17 4458
9 html 파일에서 php 구문 숨기기 file 2010.05.17 6860
8 검색엔진 등록 file 2010.05.12 142340
7 VPS (가상 호스팅) 비교 file 2010.05.12 62200
6 sAPM file 2010.05.12 20260
5 Lighttpd 설치 file 2010.05.11 20677
4 Zend Optimizer + eAccelerator + Suhosin file 2010.05.11 18247
3 PHP 설치 file 2010.05.11 15056
2 Apache 설치 file 2010.05.11 16656