<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”을 정의하고 있으니 참고 하시길 바랍니다.
구글에서 웹개발자를 위해 공개한
Closure나
GWT 라이브러리에는 모두 이 속성들이 제공됩니다. 하지만, 여러분 스스로 새로운 컨트롤을 만든다면, 꼭 한번쯤 이 부분을 고려해 주세요.
비록 작은 차이지만, 이를 통해 많은 이들이 더 쉽고 편하게 인터넷을 누릴 수 있다는 점을 꼭 기억해 주세요.
작성자: 구글 소프트웨어 엔지니어 Dominic Mazzoni
