작성일: 2011년 3월 21일 월요일
본 글은 구글의 ToTT에 발행되었던 글입니다.  ToTT는 Testing on The Toilet의 약자로 매주 구글 엔지니어들에게 소프트웨어 테스트와 관련한 짧고 효과적인 기사를 화장실에 걸어두는 데에서 유래하였습니다. 요즘에는 소프트웨어 테스트 뿐만 아니라 웹 접근성, 리더쉽, 수면에 대한 조언까지 다양한 기사들이 매주 발행됩니다. 좋은 기사들 때문인지는 모르지만 아침에는 화장실이 항상 만원입니다. :) 웹개발자분들이 좀 더 쉽게 접근할 수 있는 웹사이트를 만드는 데 도움이 될 것 같아 공유해드립니다.
한 프로그래밍 한다는 엔지니어가 어느날 세련된 스타일의 CSS(Cascading Style Sheet)와 함께 다음과 같은 웹페이지 코드 블럭을 작성하였습니다. 그런데 여기에 문제가 한가지 있습니다. 혹시 “Next”와 “Previous” 버튼에서 이 오류를 잡아내신 분 있나요?
<div class=”wizard_navbutton_panel”>  <div class=”wizard_button” onclick=”prev()”>Previous</div>  <div class=”wizard_button” onclick=”next()”>Next</div></div>
무엇일까요? 그렇죠! 이 엔지니어는 어떤 사용자는 마우스를 사용하지 않을 수도 있다는 사실을 고려하지 않았습니다.


앞을 보지 못하는 한구글씨는 마우스 대신 스크린 리더를 통해 인터넷을 세상을 접합니다. 이 페이지는 키보드 명령이나 혹은 음성 명령을 통해 접근 가능 하지만, 정작 이 “버튼들”은 누를 수가 없습니다. 일부 스크린 리더는 이들을 “버튼"이 아닌 일반 텍스트라고 인식하기 때문이죠.


다른 상황을 볼까요? 날 때부터 코딩을 즐기던 이코더씨는 인터넷 브라우져에서도 키보드만을 고집합니다. 사실 꽤나 세련되게 포장된 이 버튼들은 진짜 “버튼"처럼 보입니다. 하지만, 정작 탭(Tab)키를 사용해 이 버튼을 누르려고 해보지만, 이들은 포커스를 받거나 탭 순서(Tab order)를 설정하지 않았기 때문에 접근할 수 없습니다.

자 그럼 어떻게 해야 할까요?
1.  너무나 간단하게도 , HTML 표준 태그인 <button> 이면, 만사 OK!
<button class=”wizard_button” onclick=”prev()”>Previous</button>
<button class=”wizard_button” onclick=”next()”>Next</button>
2. 그럼 <button> 태그를 쓰지 못할 경우에는 어떻게 할까요? 이번에도 “tabindex”와 “role”만 정해주시면 됩니다!
<div ... tabindex=”0” role=”button”>Previous</div>
<div ... tabindex=”0” role=”button”>Next</div>
이름에서도 알 수 있다시피, “tabindex” 속성은 일반 HTML 엘리먼트에 탭순서를 지정할 때 사용합니다. 일반적으로 ‘0’은 브라우져에서 자연적인 순서로 탭순서를 정하겠다는 의미이고 양의 정수는 개발자의 임의대로 정하겠다는 의미입니다.


“role”속성은 ARIA(Accessible Rich Internet Applications)라는 인터넷 접근성 표준의 한 부분입니다. 다행스럽게도 이 속성은 대부분의 최신 브라우저나 여러 보조 소프트웨어에서 잘 동작하며, 일반적인 사용자에게는  아무런 영향도 미치지 않습니다. 표준에서는 “button” 이외에도 “checkbox”나 “link”와 같은 일반적인 컨트롤에 대해서도 “role”을 정의하고 있으니 참고 하시길 바랍니다.


구글에서 웹개발자를 위해 공개한 ClosureGWT 라이브러리에는 모두 이 속성들이 제공됩니다. 하지만, 여러분 스스로 새로운 컨트롤을 만든다면, 꼭 한번쯤 이 부분을 고려해 주세요.


비록 작은 차이지만, 이를 통해 많은 이들이 더 쉽고 편하게 인터넷을 누릴 수 있다는 점을 꼭 기억해 주세요.

작성자: 구글 소프트웨어 엔지니어 Dominic Mazzoni 
번역: 구글코리아 소프트웨어 엔지니어 장정식