센스리더가 읽을 수 있는 커스텀 select box 코드

접근성이라는게 aria~류만 잘 써주면 되는줄 알았더니, 실제로 스크린리더 기기별로 지원하는 aria가 달랐고, 또 원래대로라면 예를들어 '목록 버튼, 랜드마크'라고 정상적으로 읽어주는 것을, 업체측 사정에 따라 알아듣기 쉽게 '목록'이라고만 읽어줘야할 때도 있었는데, 그러다보니 작업하기가 참 까다로웠음. 처음에는 그렇게 바꾸다보니 이게 접근성이 맞나 싶다가도 오히려 또 굳이 저렇게 다 길게 읽어주는걸 보니 실제 쓰려면 그래도 간결한게 맞긴맞네라는 생각도 들었음(긴거는 진짜 '텍스트 필드, 글자를 입력하려면 이중탭 하세요, 맞춤법 로터를 이용한 사용' 뭐 이런식으로 textarea하나를 저렇게 읽어댐.. 물론 이건 iOS긴 하다만)

 

아무튼 그와중에 select box를 <select>태그말고 커스텀으로 만들어야하는 상황이 왔는데, 아무리해도 센스리더가 제대로 focus나 동작을 하지 못해서 꽤나 애먹었었음. 그러다가 지금에서야 어느정도 접근성에 적응(?)을 하고 나서 원하는대로 만들게 되었음(하.............)

 

https://codepen.io/pmx/pen/jOYwyYw

커스텀 셀렉트박스(센스리더 적용)

 

See the Pen 커스텀 셀렉트박스(센스리더 적용) by peamexx (@pmx) on CodePen.

 

동작은 간단하게 설명하면 아래와 같음

============================================

[마우스 클릭]

- 리스트 열리고 마우스로 알아서 선택

 

[키보드 위아래 선택]

- 리스트는 안열리지만 위아래 옵션들을 선택해서 읽어줌

============================================

 

순전히 "센스리더가 간결하게 잘읽음"에 초점맞춘거라 aria류는 일단 다 뺌. 만약 이것들도 지켜줘야한다면 각자 지원하는 리더기에 맞게 추가해주면 될듯.

 

사실 구현하는게 지금보면 그렇게 어려운건 아닌데 그때는 정말 맨땅에 헤딩수준이였어서 힘들었던 기억이........ㅜㅜㅜ