서식 제어 요소의 디자인은 제한되어야 한다.

서식 제어 요소란 사용자의 선택 또는 입력을 위하여 웹 브라우저가 제공하는 사용자 인터페이스를 말합니다. HTML 요소 가운데 서식 제어요소들은 input, textarea, select, option, button 이며 본문의 예제들과 같은 형태로 출력이 되는데 CSS/Javascript 기교를 이용하여 이것의 디자인을 바꾸는 사례가 많습니다. 하지만 일부 서식 제어 요소는 스타일 변경을 허용하지 않아야 합니다. 스타일 변경을 허용하지 않는 이유는

1. 해당 요소들에 대한 스타일 변경을 대부분의 웹 브라우저가 지원하지 않기 때문이며,
2. 이를 극복하기 위하여 사용되는 트릭이 키보드 접근에 치명적이고 화면 표시 속도를 떨어뜨리기 때문입니다.

스타일 변경이 자유로운 요소들은 CSS를 이용하여 ‘border, background, width, height, image replace’ 기법 적용이 가능하나, 스타일 변경이 제한된 요소들은 width, height 만 지정이 가능합니다.

스타일 변경이 자유로운 서식 제어 요소들

HTML Markup	View
CSS를 이용하여 border, background, width, height, image replace 기법의 적용이 가능하다.
input type="text"
input type="password"
input type="submit"
input type="reset"
input type="image"
input type="button"
textarea	Textarea
button

스타일 변경이 제한된 서식 제어 요소들

HTML Markup	View
CSS를 이용하여 width, height 만 제어할 수 있다.
input type="checkbox"
input type="radio"
input type="file"
input type="hidden"	화면 출력 안됨
select, option	Option

스타일 변경이 제한된 서식 제어 요소들의 디자인을 변경하는 것이 기술적으로 불가능 한 것은 아닙니다. 그러나 보통의 경우 키보드 접근이 되지 않거나 표현만을 위한 가짜 마크업으로 하여금 시각장애인을 혼란스럽게 만듭니다. 키보드가 접근되지 않는다는 것은 시각장애인이 이용할 수 없다는 것을 의미하며 이것은 ‘장애인차별금지 및 권리구제 등에 관한 법률‘에서 정한 ‘차별행위’에 해당되어 소송의 빌미가 될 수 있으므로 주의하여야 합니다. 되도록 웹 브라우저가 제공하는 고유한 인터페이스를 그대로 사용하는 것이 웹 접근성을 훼손하지 않는 방법 입니다.