키보드 조작, 화면 확대, 색 이외의 결과 안내를 기본부터 점검하면 작은 퀴즈도 훨씬 많은 사람이 사용할 수 있다.
퀴즈를 만들었다. 보기도 나오고 정답 버튼도 반짝인다. 그런데 마우스를 서랍에 넣는 순간 아무것도 할 수 없다면? 화면은 멀쩡한데 입구가 없는 방을 만든 셈이다.
키보드만으로 선택·제출·확인이 가능하고, 화면을 확대해도 읽을 수 있으며, 정오답을 색 말고 글로도 알려주는 것이 접근 가능한 퀴즈의 기본이다.
클릭 가능한 것과 조작 가능한 것은 다르다
마우스로 누르는 동작을 만들기는 쉽다. 하지만 일반적인 div 요소에 클릭 이벤트만 붙이면 키보드가 초점을 이동할 수 없거나 Enter로 실행되지 않을 수 있다. 눈에 보이는 버튼과 실제로 조작 가능한 버튼은 구별해야 한다.
HTML의 button과 radio input 같은 기본 요소를 사용하면 브라우저가 기본 키보드 동작을 제공한다. 보기 중 하나를 선택하는 퀴즈라면 같은 name을 가진 라디오 버튼과 각 보기의 label을 연결하는 구조가 출발점이다.
Tab을 눌렀을 때 어디에 초점이 있는지 보여주는 테두리도 필요하다. 초점 표시를 디자인이 마음에 들지 않는다는 이유로 없애면 사용자는 화면 속에서 길을 잃는다. 색을 바꾸더라도 눈에 띄는 초점 상태를 남긴다.
마우스를 치우고 실제 순서대로 시험한다
페이지를 새로 연 뒤 Tab을 눌러 보자. 문제 영역에서 보기를 선택하고 제출 버튼으로 이동할 수 있는가? Shift+Tab으로 이전 항목으로 돌아갈 수 있는가? 일반적인 라디오 그룹은 화살표 키로 보기 사이를 이동할 수 있다.
제출 후 정답 설명이 새로 나타났다면 키보드 사용자가 그 변화를 알아차릴 수 있어야 한다. 결과에 초점을 적절히 보내거나 상태 메시지가 보조기술에 전달되도록 구성할 수 있다. 무조건 초점을 튀게 하기보다 사용자의 흐름이 끊기지 않는지 시험한다.
틀렸다는 표시가 화면 아래에만 생겨도 놓치기 쉽다. 결과 문구가 어느 문항에 해당하는지 알 수 있게 쓰고, 다음 동작을 명확한 이름의 버튼으로 제공한다. 예컨대 ‘다시 풀기’와 ‘다음 문제’는 ‘확인’보다 목적이 분명하다.
200% 확대에서 잘리는 정보가 있는지 본다
브라우저 확대 기능으로 글자와 요소를 크게 해 보자. 보기 텍스트가 버튼 바깥으로 넘치거나 제출 버튼이 화면 밖에 고정되어 사라진다면 수정이 필요하다. 고정 높이와 지나치게 좁은 카드 폭이 자주 문제를 만든다.
긴 보기 문장은 자연스럽게 줄바꿈하도록 하고, 작은 화면에서는 세로 배치로 바꾸는 편이 낫다. 확대했다고 정보 자체가 사라지면 안 된다. 확대 상태에서 가로와 세로 이동이 얼마나 필요한지도 살핀다.
또 화면읽기 프로그램에서는 문제 제목, 선택지, 현재 선택 상태가 적절히 읽히는지 확인해야 한다. 시각적 배치만 잘되어 있어도 의미상의 묶음이 없다면 사용자가 무엇에 답하는지 알기 어렵다. fieldset과 legend 같은 요소를 검토할 만하다.
빨강과 초록만으로 정답을 말하지 않는다
정답 버튼은 초록, 오답 버튼은 빨강. 보기에는 깔끔하지만 색을 구별하기 어렵거나 화면의 색 대비가 낮으면 결과를 놓칠 수 있다. ‘정답입니다’, ‘다시 생각해 보세요’ 같은 문구와 이유를 함께 제공해야 한다.
기호를 추가할 때도 기호 하나에만 의미를 맡기지 않는다. 텍스트로 결과를 제공하면 흑백 화면, 색각 차이, 보조기술 환경에서도 의미가 유지된다. 오류와 정답 설명은 색상 장식이 아니라 학습의 핵심 내용이다.
개발할 때는 질문과 보기를 의미적으로 묶는 일도 잊기 쉽다. 문항 제목이 화면 위쪽에만 보이고 보기들은 별개로 나열되어 있다면 화면읽기 사용자는 현재 선택하는 답이 어느 질문에 속하는지 혼동할 수 있다. fieldset의 legend는 그런 맥락을 알려주는 한 가지 방법이다. 단순히 요소를 시각적으로 가까이 놓는 것만으로 충분하다고 가정하지 말자.자동으로 시간이 끝나는 퀴즈라면 또 다른 문제가 생긴다. 읽는 속도와 입력 방식은 사람마다 다르다. 제한 시간이 꼭 필요한 평가인지, 연장이나 중지가 가능한지, 제한이 끝나기 전 명확히 알 수 있는지 살펴야 한다. 접근성 점검은 마지막에 붙이는 장식이 아니라 문제의 규칙을 정할 때부터 고려할 설계 조건이다.마지막 점검은 간단하다. 마우스를 쓰지 않고, 화면을 크게 하고, 색을 무시한 채 페이지를 끝까지 사용해 본다. 세 번의 시험에서 각각 다른 결함이 보일 수 있다. 퀴즈의 진짜 정답은 정답을 맞히는 사람만 들어올 수 있는 문을 만드는 것이 아니다.
