brunch

라이킷 1 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by SNC Lab Nov 20. 2019

사용자가 요청했을 때 기능 실행하기

오류 유형으로 살펴보는 웹 접근성 지침

혹시 웹 콘텐츠를 탐색하던 중에 요청하지 않은 기능이 갑자기 실행된 적 있으신가요?

예를 들어 링크가 새 창으로 열리거나, 우리의 의도를 넘겨짚어 새 콘텐츠를 불러오는 등의 기능들이 우리가 원하지도 않았는데 실행되곤 하는 경우 말입니다.

이러한 경험을 하게 될 때 사람들마다 받아들이는 느낌은 상당히 다를 수 있습니다. 특히 저시력인과 시각장애인은 자신의 예측을 벗어난 화면에 혼란스러울 수 있고, 인지장애인은 새로운 상황을 이해하는데 많은 시간이 걸릴 수 있습니다.

웹 접근성에서는 이러한 문제를 방지하기 위해 사용자의 예상을 벗어난 변화가 일어나지 않도록 몇 가지 오류 유형을 제시하고 있습니다. 이번 글에서는 그 오류 유형을 통해 사용자가 예측가능한 콘텐츠와 기능을 제공하는 방법을 함께 알아보도록 하겠습니다.

사용자가 예측하지 않은 새 창이 열리는 경우

새 창 열림에 대한 안내 없이 새 창이 열리거나, 예상하지 못한 새 창이 열리게 되면 누구나 일순간 당황스러울 것입니다.

Example

새 창으로 열리는 링크를 사용자가 미리 알 수 있는 수단을 제공하지 않은 사이트맵 링크

Do Not

<a onclick="window.open('https://www.open.go.kr/','','resizable=yes,scrollbars=yes')" href="#">정보공개 청구</a>

일반적으로 링크는 현재 창에서 열리는 것이 기본값이기 때문에, 사용자가 Do Not과 같이 새 창으로 열리는 ‘정보공개청구’ 링크를 클릭하자 링크가 새 창으로 열리면 매우 당혹스러울 겁니다. 이는 스크린리더 사용자의 경우도 마찬가지입니다.

우리가 Do Not과 같이 링크를 구현하면, 링크가 새 창으로 열리는지 현재 창에서 열리는지 사용자가 알 수 있는 방법은 없습니다.

<a title="새 창 열림" onclick="window.open('https://www.open.go.kr/','','resizable=yes,scrollbars=yes')" href="#">정보공개청구</a>

Best

<a href="https://www.open.go.kr/" target="_blank">정보공개청구</a>

특히나 시각장애인은 클릭한 링크가 새 창으로 열렸는지 알아볼 수 없기 때문에, 링크를 클릭하기 전에 링크가 새 창으로 열린다는 안내가 필요합니다.

자바스크립트의 window.open() 함수를 사용하여 새 창으로 링크를 열 때는 Do와 같이 title 속성을 사용하여 새 창 열림에 대한 안내를 제공해야 합니다.

간혹 스크린리더 사용자 중에는 title 속성을 읽지 않게 설정하는 사람도 있습니다.

꼭 window.open() 함수를 사용하여 링크를 제공해야 되는 것이 아니라면, Best와 같이 URL은 href에 주고, 속성으로 target="_blank"를 주면 스크린리더가 새 창 열림을 음성으로 사용자에게 알려주기 때문에 더욱 좋습니다.

입력 서식의 값을 변경하는 것만으로 다른 페이지로 이동하거나 현재 페이지의 의미가 완전히 바뀌는 경우

간혹 사용자의 편의를 위해 제공한 기능이 사용자의 예상을 벗어났거나 필요 이상의 변화를 일으켜 불편함을 주기도 합니다. 사용자의 편의를 생각한 것은 좋은 의도이지만, 어떤 사용자에게는 과도한 친절이 불편함을 넘어 사용을 방해하는 장애가 되기도 합니다.

Example

option 값이 변경될 때마다 링크가 열리는 셀렉트박스

Do Not

...생략...
<select name="relative_site" id="rel_site" onchange="location.href=this.value">
    <option>관련사이트</option>
    <option value="https://www.wah.or.kr:444/index.asp">웹 접근성 연구소</option>
    <option value="https://a11yproject.com/">TheA11YProject</option>
    <option value="https://webaim.org/">WebAIM</option>
</select>

Do Not과 같이 option의 값을 변경하는 것만으로 링크가 열리는 셀렉트박스는 몇 가지 고려되지 않은 점이 있습니다. 예를 들어, 사용자가 option을 잘못 선택하거나, 키보드 화살표로 셀렉트박스의 값을 변경할 때마다 새 창이 열리는 것을 경험하게 될 사용자를 고려하지 않은 것입니다.

특히나 키보드 사용자의 경우 셀렉트박스의 값을 변경하는 방법에 다른 대안이 없기 때문에 사용자가 겪게 될 문제가 심각합니다.

요약

사용자에게 편의를 제공하려는 의도는 좋지만, 여러 상황을 고려하여 사용자의 예상을 벗어나지 않아야 합니다. 사용자의 예상을 벗어나지 않으려면 사용자가 행한 행위의 범위를 확장하지 않고도 그 결과를 예측할 수 있게 해야 합니다.

위에서 언급했듯이, 셀렉트박스의 option을 선택하는 것과 이동하는 것을 분리하고, 새 창이 열리는 것을 미리 알 수 있게 하여 사용자를 당황스럽게 만들지 않아야 합니다. 그리고 ‘이동’ 버튼을 클릭하여 페이지 이동을 사용자가 요청했을 때 요청한 URL의 페이지로 이동이 되도록 합니다.

이와 같이 사용자에게 기능을 제공할 때는 웹 접근성의 관점에서 문제가 되지 않는지를 먼저 고려하는 것이 좋습니다.

keyword