아티클

[개발일지] 캘린더의 접근성 높이기

2010-12-30 11:19:32

네이버me가 제공하는 다양한 UI를 마크업하면서 최소한의 접근성을 보장하기 위해 많은 노력을 하였습니다. 그 중에서도 캘린더의 경우는 현재 제공되고 있는 다른 캘린더와 비교하였을 때 키보드와 스크린리더로 무리없이 접근 가능하게 되어있어 가장 뿌듯하게 생각하고 있는 UI입니다. 이번에는 캘린더를 마크업하면서 고민했던 접근성 관련 내용을 소개해보고자 합니다.

네이버me의 캘린더

1.gif 

현존하는 캘린더들의 접근성을 체크해보자.

일반적으로 제공되고 있는 캘린더를 살펴보면 키보드로는 접근이 되지않는 문제가 있습니다. 네이버와 다음, 그리고 구글에서 제공하고 있는 미니 캘린더의 키보드 접근성을 모두 살펴보았으며 아래 표에서 빨간색으로 표시된 부분에만 키보드 포커스가 갈 뿐, 나머지 영역을 키보드로 접근한다는 것은 절대 불가능하다는 사실을 깨달았습니다.

2.gif 

키보드로 접근이 안되는 이유는 무엇일까요?
세 개의 캘린더는 모두 날짜가 테이블 셀 안에 일반 텍스트로 구현되어 있기 때문입니다.

<td>2</td>


<button> 태그를 이용하여 시멘틱과 접근성 동시에 잡기

기존 캘린더들이 키보드 포커스가 닿을 수 없었던 점을 고려하여, 네이버me의 캘린더에는 키보드 포커스가 닿을 수 있는 요소를 반드시 넣어야 겠다는 굳은 결심을 하고 마크업을 진행하게 되었습니다. 처음에는 각 여러 날 중 하나의 날을 선택하는 액션이 마치 여러 항목 중 하나를 선택하는 라디오버튼의 액션과 같다고 생각하여 <input type="radio"> 를 이용해 마크업하였습니다.

HTML 구조만 적용되어있는 화면을 본다면 대략 아래와 같을 것입니다.

3.gif

그런데, 라디오 버튼에 디자인을 적용하는 것이란 상당히 까다로웠습니다. 단순히 생각해보더라도 눈에 보이는 라디오 버튼은 감춰야 할 것이고, 레이블(<label>)로 디자인을 표현해야 한다는 것을 알 수 있습니다. 물론 키보드 접근성까지 고려한다면 더 복잡한 단계가 필요합니다. 구체적인 방법은 NULI의 "중요 표시 버튼 접근성 있게 만들기 (http://html.nhndesign.com/blog/8012)"를 통해 확인하실 수 있습니다.캘린더를 예로 든 것은 아니지만 공통적인 이슈이니 충분히 도움이 될 것이라 생각됩니다.

이런 까다로운 점을 해소하기 위해 생각해낸 것이 바로 <button>입니다. <button>을 이용하면 디자인을 표현하는 것에도 문제가 없고, 키보드 포커스 역시 잘 표시되고, 클릭하면 특정 인터랙션을 발생시킨다는 점에서 의미에 어긋나지도 않습니다.

<button>을 이용한 후, CSS를 적용하지 않은 HTML만의 화면은 아래 그림과 같습니다.

4.gif

캘린더의 접근성, 확인해볼까?

먼저 키보드 접근성을 테스트해보았습니다. 네이버me 페이지를 띄우고 키보드 단축키 살펴보기 에서 소개한 것 처럼 캘린더 영역으로 빠르게 접근할 수 있는 단축키 7을 눌러봅니다.

단축키 7을 눌러 캘린더 영역에 접근한 화면
5.gif 

그리고 탭키를 여러번 누르면 각 날짜마다 키보드 접근이 가능한 것도 확인할 수 있습니다.

달력 안에서 탭키를 여러번 눌렀을 때의 화면
6.gif

날짜를 선택하고 싶을 때는 스페이스바를 눌러줍니다.

원하는 날짜 이동 후 스페이스바를 눌렀을 때의 화면
7.gif

엔터가 아닌 스페이스바를 눌러야 하는 이유는 캘린더 전체 영역이 <form>으로 감싸져 있기 때문에 엔터를 눌러 서브밋이 되는 불상사(?!)를 막기 위함입니다.

두 번째로 센스리더를 통해 스크린리더 이용시의 접근성은 어떠한지도 확인해보았습니다. 날짜가 표시되는 테이블 안으로 들어오면 1버튼, 2버튼, 3버튼 이라고 읽어주고 스페이스바를 누르면 선택됩니다. 선택 후에는 해당 날짜의 일정을 입력하거나 이미 저장된 일정을 확인할 수 있습니다.

그렇지만, 현재로서는 달력을 벗어난 나머지 부분에 대한 접근성이 완벽하지 않아 조금 더 개선이 필요합니다.

 

--------------------------------------------------------------------------------------------------------------------------------------------------------------

2010년 12월 30일 덧붙이는 말.

구글 미니 캘린더에 탭으로 접근이 안되는 것은 사실이지만, 구글 캘린더의 키보드 접근성이 좋지 않은 것은 아닙니다.
구글 캘린더에서 제공하는 키보드 단축키로 거의 모든 기능에 쉽고 빠르게 접근할 수 있습니다.  (제보:겨미겨미님)

댓글 0
댓글을 작성하려면 해주세요.