CSS Drop Down : Emulate Select/Option. > html

서식 제어 요소(Form Control Element)를 디자인 하는 것은 상황에 따라 접근성을 떨어뜨리는 경우가 있기 때문에 제한되어야 하고 신중하게 사용해야 합니다. 이미 이전에 포스팅을 했지만 다시 한번 환기하는 차원에서 제한되어야 하는 서식 요소들은 어떤 것들이 있는지 살펴보겠습니다.

서식 제어 요소의 디자인을 제한하는 이유

이런 서식 제어 요소들의 디자인을 변경하는 것은 일단 브라우저들이 지원하지 않습니다. 이런 이유 때문에 이것을 디자인 하려는 시도는 실제로는 기능하지 않는 가짜 마크업을 남발하게되고 웹 접근성을 떨어뜨리는 요인으로 작용합니다. 하나의 콘트롤을 디자인 하기 위하여 화면에 보이는 마크업과 실제로 기능을 수행하는 마크업을 각각 따로 작성하게 되면 화면낭독기 사용자들은 화면 표시를 위한 가짜 마크업 때문에 곤경에 빠지는 상황이 연출됩니다.

그리고 간혹 단순한 텍스트 링크 기능을 수행함에도 불구하고
라디오 버튼을 장식적인 요소로 사용한 다음 라디오 콘트롤에 자바스크립트를 입혀서 페이지 이동을 처리하는 고품격(?) 사용자 경험을 제공하기도 하는데 매우 잘못된 방법중의 하나 입니다.

모든 서식 제어 요소들은 사용자가 ‘전송’ 버튼을 누르기 직전까지 아무짓도 하지 않고 기다려야 할 의무가 있습니다. 왜냐하면 그것이 바로 서식 제어 요소들의 올바른 사용법이고 시각 장애인들은 그런 표준화된 그리고 전통적인 사용자 인터렉션에 의지해서 웹을 탐색하고 있기 때문입니다.

"라디오 버튼을 눌렀을 뿐인데 페이지가 이동할 줄은 몰랐어요. 저는 전송 버튼을 누르지도 않았거든요."

<select> 콘트롤을 본래 목적에 맞게 사용하기

한편 서식 제어 요소를 사용할 때 사용자 입력을 전송하는데 쓰지 않았다고 해서 무조건 틀렸다고 말할 수도 없습니다. CSS가 일반적으로 널리 퍼지기 이전에 서식 제어 요소들은 다른 HTML 요소들이 흉내낼 수 없는 효과적인 UI 콘트롤을 제공했기 때문에 그 이점만을 취하기 위한 활용사례가 많았습니다. 현재까지도 흔하게 볼 수 있는 예가 바로 <select> 콘트롤 입니다. 본래의 목적은 단일 또는 다중 선택된 사용자의 선택값을 서버측에 전송하기 위한 목적이었지만 ‘패밀리 사이트 바로가기, 유관 기관으로 이동’과 같이 단순하게 텍스트 링크로 처리해도 될만한 UI에 지금까지도 여전히 <select> 요소를 사용하고 있습니다. 이 때 자바스크립트로 URL 값을 처리해서 넘기는 경우도 있고 서버측 스크립트로 값을 처리해서 넘기는 경우도 있는데 어느편이 더 유니버설한 설계 방법인지는 여러분이 직접 판단해 보시기 바랍니다.

하지만 한 발 더 나아가 저는 더 이상 <select> 콘트롤을 이용하여 페이지 이동하는 기법을 사용할 필요가 없다고 생각합니다. 자바스크립트나 서버측 스크립트를 작성해서 페이지를 이동하는 방법보다 더 쉬운 방법이 있기 때문입니다. CSS 배워서 이런데 써먹을 수 있습니다. <select> 콘트롤은 이제 그만 휴가 보내고 CSS에게 일을 시켜 보세요. <select> 요소의 드롭다운 콘트롤은 고작 ‘숨은 링크 목록’을 토글해서 보이거나 숨기는 인터렉션일 뿐입니다.

그럼에도 불구하고 <select> 콘트롤이 사랑받는 이유

요소 본래의 목적에 맞지 않는 마크업과 복잡한 스크립트의 사용을 유발함에도 불구하고 <select> 콘트롤은 여전히 기획자, 디자이너, 개발자에게 사랑받고 있습니다. 왜 그럴까요?

• 좁은 공간을 효과적으로 사용할 수 있기 때문에
• 클릭하면 숨은 목록을 볼 수 있는 전통적인 인터페이스로써 이미 대중에게 학습되었기 때문에
• 오랜 세월에 걸쳐 잘 작성된 레거시 코드가 있고 새로 만들 때 복사 후 붙여넣기만 하면 되니까

정도로 요약할 수 있겠습니다. 결국 우리는 <select> 라는 콘트롤을 본래의 목적에 맞게 사용하되 ‘긴 직사각형의 우측 끝에 화살표가 달린 모양’만 취하면 되는 겁니다.

결론 : <select> 형태는 취하고 마크업은 버리자

예제를 새 창에서 보기

위의 두 예제는 같은 모양을 하고 있지만 첫 번째 예제는 링크이고 두 번째 예제는 단일 선택을 위한 폼 콘트롤 입니다. 폼 콘트롤 우측에 ‘GO’ 버튼이 보이시나요? ‘사용자가 폼을 전송하기 전까지는 아무짓도 하지 않아야 한다’는 원칙을 실천하기 위하여 존재하는 버튼 입니다. ‘GO’ 버튼이 없으면 어떻게 되냐구요? 아마도 키보드 사용자는 다른 항목을 선택할 기회를 갖지 못하고 첫 번째 항목을 선택하는 순간 이미 다른 페이지로 이동되어 있거나 또는 전송 버튼을 찾느라 곤경에 빠질 것입니다. 저 ‘GO’ 버튼이 있음으로 인해서 마우스를 사용하는 대부분의 사용자들은 불편함을 느낄 수도 있을 것입니다. 하지만 ‘누구나 사용’할 수 있도록 유니버설하게 개선되었기 때문에 ‘인류 행복의 총량’에는 큰 변화가 없을 것입니다. 

다행히도 저렇게 단일 선택 옵션이 하나만 존재하는 경우 폼 대신 첫 번째 예제와 같이 링크로 처리할 수 있는 경우가 거의 대부분 입니다. 폼 대신 링크로 처리하게 되면 ‘GO’ 버튼이 필요가 없기 때문에 모든 사람들이 더 기뻐할 것입니다. 링크 목록은 클릭하기 전까지 펼침 상태로 존재하고 Enter 키를 받아야만 페이지 이동을 하기 때문에 ‘GO’ 버튼이 없어도 키보드만으로 제어를 할 수가 있죠.

위 제시된 예제는 처리해야 할 콘텐츠가 ‘링크’ 인지 또는 ‘진짜 폼의 선택’을 위한 것인지 명확하게 이해한 다음 사용해야 합니다. 단순히 링크로 처리해야 할(처리해도 될) 항목을 두 번째 예제로 마크업 한다면 오늘 제 포스팅은 말짱 도루묵 입니다. 부디 의미와 목적에 맞는 마크업을 선택해서 사용해 주실것을 부탁 드립니다. 이번 예제도 행복한고니로부터 도움을 받았습니다. 요즈음은 행복한고니가 짬짬이 알려주는 jQuery 덕분에 아주 즐거운 나날들을 보내고 있답니다. ^^

출처 : http://naradesign.net/wp/2010/02/18/1192/