키보드로 접근할 수 있는 콘텐츠 제공하기
오류 유형으로 살펴보는 웹 접근성 지침
이번 글에서는 오류 유형을 통해 키보드가 접근할 수 있는 웹 콘텐츠를 제공하는 방안에 대해 알아 보려 합니다. 웹 접근성에서 키보드를 특별히 중요하게 다루어야 하는 이유는 무엇일까요?
웹사이트를 탐색할 때 시각 장애인 사용자는 스크린 리더의 도움을 받아도 화면에 UI와 마우스 커서가 어느 곳에 위치하고 있는지 정확하게 알 수 없기 때문에 마우스로 원하는 요소를 클릭 하기가 쉽지 않습니다. 또한, 손에 떨림이 있거나 신체 운동에 제약이 있는 사용자 역시 마우스로 탐색을 하기 보다는 주로 키보드를 사용합니다.
키보드에서 ‘Tab’ 키를 누르면 초점(focus)이 현재 상호작용이 가능한 위치로 이동합니다. 만약 상호작용이 가능한 요소임에도 초점이 이동하지 않거나, 키보드에 반응하지 않는다면 키보드 사용자들은 원하는 기능을 사용할 수 없게 됩니다. 설령 상호작용이 가능한 요소에 초점이 이동한다 하더라도 시각적으로 표시되지 않는다면, 사용자는 현재 화면에서 어떤 요소를 탐색하고 있는지 알 수 없게 됩니다.
키보드로 접근할 수 없는 경우
상호작용이 필요한 요소에 키보드로 접근조차 할 수 없는 오류는 대부분 요소 스타일의 일관성과 심미성을 위해 태그와 스타일을 직접 변경하여 사용하는 경우에 빈번하게 발생합니다.
Example
키보드로 접근이 불가능한 커스텀 UI
Do Not
...
<p>08 티켓 수령 방법을 선택해 주세요.</p>
<ul class=“radiogroup” id=“rg1”>
<li id=“r1”>현장에서 직접 수령</li>
<li id=“r2”>우편 수령</li>
</ul>
...
Do Not 사례에서는 HTML5 요소인 <input type="radio"> 대신 <ul>/<li> 태그를 이용하여 라디오 버튼을 표현하였습니다. <ul>/<li> 태그는 상호작용이 가능한 요소가 아니기 때문에 별도의 속성(attribute)이나 스타일을 적용해 주지 않으면 키보드로 조작하거나 초점을 시각적으로 확인할 수 없습니다.
Do
...
<p>08 티켓 수령 방법을 선택해 주세요.</p>
<input type="radio" name="receipt" value="현장에서 직접 수령">
<input type="radio" name="receipt" value="우편 수령">
...
Do 사례에서는 위와 같은 문제를 해결하게 위해 <li> 태그로 마크업되어 있던 라디오 버튼을 <input> 태그로 변경하였습니다.
<input type="radio"> 태그를 사용하면 상호작용이 가능한 요소를 사용자에게 제공할 수 있고, 위의 예시 이미지에서와 같이 파란색 테두리로 표현된 초점(윈도우 OS의 크롬 브라우저 기준)을 통해서 현재 사용자가 탐색 중인 위치도 확인할 수 있습니다. 이와 같이 별도의 속성(attribute)이나 스타일을 적용해 주지 않아도, 키보드로 조작하거나 초점을 시각적으로 확인할 수 있는 보편적인 UI를 사용하는 것이 사용자에게 좋습니다.
키보드로 접근은 가능하지만 작동시킬 수 없는 경우
간혹 UI 중에는 키보드로 접근은 가능하지만 키 입력을 통해서는 작동이 되지 않고, 마우스 입력을 통해서만 작동이 되는 것이 있습니다. 이러한 경우도 키보드 사용보장이 되지 않는 접근성 오류에 해당됩니다.
Example
키보드로 접근은 가능하지만 작동시킬 수 없는 버튼
예시의 ‘비밀번호 표시' 버튼은 마우스 클릭으로는 작동이 되지만, 키보드로는 초점 진입만 가능하고 키 입력을 통해 작동이 되지 않습니다. 이러한 경우 키보드 사용자는 로그인 버튼을 누른 후에야 자신의 입력이 올바르지 않았음을 알게 되지만, 무엇을 잘못 입력했는지는 알 수 없습니다.
의미 없는 개체에 초점이 이동되는 경우
초점은 키보드 사용자뿐만 아니라 많은 사용자에게 현재 상호작용 요소의 위치를 알려주는 중요한 단서 입니다. 만약 아무런 기능이 없는 요소에 초점이 진입하게 되면 사용자는 개체에 연결된 기능이 있는지 확인하기 위해 잠시 탐색을 지연할 수도 있습니다. 하지만 의미 없는 개체는 말 그대로 의미가 없기 때문에 사용자에게 어떠한 피드백도 제공하지 않습니다. 이러한 오류 유형은 특히 스크린리더 사용자의 탐색을 지연시키고, 보이지 않는 장벽이 되기도 합니다.
Example
불필요한 콘텐츠가 숨겨진 채로 남아 의미 없는 개체
예시는 이전 콘텐츠의 잔재가 숨겨진 채로 남아 화면에는 보이지 않지만, 초점이 진입할 수 있고 대체 텍스트와 같은 숨겨진 콘텐츠가 존재하는 경우를 나타낸 것입니다. 지금은 별다른 의미가 없는 개체에 초점이 진입하게 되면 스크린리더 사용자는 콘텐츠 탐색에 혼란을 겪을 수 있습니다. 만약 초점을 받은 개체가 의미있는 개체인데 보이지 않는 것이라면, 초점이 진입하면 보이도록 하거나 무의미한 개체에는 초점이 진입하지 않도록 하는 것이 좋습니다.
요약
사용자의 입력이나 상호작용을 받아야 하는 UI가 커스텀된 것이라면 마우스뿐만 아니라 키보드로도 접근하고 작동할 수 있도록 만들어야 합니다. 키보드로 접근은 가능하지만 작동시킬 수 없는 것도 접근성에 위배되는 것이기 때문에 이벤트 핸들러를 추가할 때 키보드로도 작동하는지 확인이 필요합니다.
또한, 의미없는 개체에 초점이 가는 것은 사용자의 탐색을 혼란스럽게 합니다. 키보드 접근이 필요한 개체에 한하여 초점이 진입하고 시각적으로 보이도록 해야 접근성이 좋은 콘텐츠를 제공할 수 있습니다.
