쇼핑몰 옵션선택에서의 웹접근성

지난 주말에 웹접근성 간담회도 다녀왔고.. 또 지금 하고 있는 일이 웹접근성 향상 쇼핑몰 솔루션이다 보니까 뭘 하나 하더라도 일단 접근성에 최대한 맞추고자 노력을 하게 된다. 물론 완벽하게 이해를 하고 하는 게 아니라서 시행착오도 많은데.. 오늘은 쇼핑몰에선 빠질 수 없는 것 중에 옵션선택 부분에 대해서 고민을 해보게 됐다. 마우스 이용만을 고려했을 때는 옵션을 선택하면 바로 선택된 옵션이 리스트에 추가되도록 하면 되지만 키보드를 이요하게 되면 키보드 방향키로 옵션을 선택하기 위해 변경할 때마다 추가되는.. 단순히 onchange 이벤트를 이용하면 이렇게 처리가 되는데.. 키보드 이용도 고려해서 이전에 작업했던 것을 수정해야만 했다.

구현하려고 하는 방향은 일단 마우스일 때는 위에서 말한 방법대로 처리가 되고 키보드를 이용할 때는 최종적으로 옵션항목을 선택하고 키보드의  Enter를 눌렀을 때 옵션 리스트에 추가되도록 하는 것이다. 기존에는 추가 버튼이 별도로 존재해서 옵션 선택 후 이 버튼을 클릭해야만 옵션이 추가되도록 했는데 이렇게 하니까 마우스를 이용할 때도 불편하고 키보드를 이용할 때도 버튼으로 이동해야만 하는 번거로움이 있어 후자의 방법을 생각하게 된 것이다. 스크립트 수정 작업은 완료를 했고 jQuery의 change와 mousedown 그리고 keydown 이벤트를 사용했다.

기본 로직은 다음과 같다. 우선 키보드 이용 때 방향키 사용시는 옵션이 추가되어야 하지 않기 때문에 option_add 라는 변수를 false로 설정하고 자바스크립트를 이용해 event의 keyCode를 체크해서 엔터키가 눌렸으면 option_add 변수를 true로 변경해서 옵션을 리스트에 추가하는 함수를 실행하도록 했다. 마우스 사용일 때는 option_add 변수의 값에 관계없이 옵션 추가 함수를 실행하도록 했다. 이렇게 구성을 하고서 테스트를 진행해보니 기존에 추가 버튼이 있을 때보다 좀 더 편하게 이용할 수 있었다. 혹시나 하는 생각에 지난 번 웹접근성 간담회 때 알게된 이상훈팀장님께 메일을 보내 실제 어떻게 사용하시는지 문의를 해둔 상태인데 바람은 후자의 방법대로 마무리 되면 좋겠다.