웹 접근성(Accessibility)을 고려할 때 자바스크립트(JavaScript) 사용에 대해 다시 좀 보기로 했다. 그 동안 공공 프로젝트를 여러 차례 하면서 우리나라 웹 접근성 표준에 대해 익히 알고 있었는데 오늘 이걸 다시 거들떠 봐야겠다는 생각이 들었다.

웹 접근성에 있어서 JavaScript에 대한 오해

JavaScript에 대한 웹 접근성을 고려하기 위한 "표준"을 우연찮게 다시 보게 됐는데 이상한 내용이 있었다. 우리나라의 웹 접근성에 대해 사실상 "표준"을 제시하고 있는 정보화진흥원의 웹 접근성 연구소에서 기술한 다음과 같은 내용이 문제다.

적절한 낮춤 방법을 적용하면 신기술을 사용할 때, 신기술을 지원하지 않는 환경에 대한 접근성을 보장할 수 있다. [중략] 예를 들어 우리나라의 화면 낭독 프로그램이 JavaScript를 충분히 지원하지 못하고 있으므로, JavaScript를 이용한 웹 콘텐츠 구현 기술은 신기술로 분류될 수 있다. 만일 우리나라에서 구입 가능한 화면 낭독 프로그램이 JavaScript를 충분히 지원하게 된다면 JavaScript는 더 이상 신기술로 분류되지 않을 것이다.

- 웹 접근성 연구소, “웹 콘텐츠 신기술 제작기법” 중

다시 풀어 말하자면 "신기술"을 지원하지 않는 환경에 대해 "적절한 낮춤 방법"을 적용하여 접근성을 보장해야 한다는 것인데 예를 들어 JavaScript가 바로 신기술이므로 낮춤 방법을 제공해야 한다는 것이다.

참 황당한 내용이다. JavaScript는 HTML과 발 맞춰 발표된 기술이다. HTML이 처음 사용되기 시작한 게 1990년대 전반인데 JavaScript 역시 비슷한 시기였으며 대중적으로 확산된 중요 시점은 둘 다 1995년 HTML 2.0, NetScape Navigator 2.0이 발표되면서부터다. 무려 18년전이다. HTML은 왜 신기술이 아니지?

전제가 잘못됐는데 예를 거기에 끼어맞추는 내용이다. 신기술을 지원하지 않는 사용자를 배려한다는 건 좋은데 중요한 건 신기술도 아니고 JavaScript도 아니다. 다양한 종류의 사용자를 배려해서 웹페이지가 전달하고자 하는 내용을 충분히 전달할 수 있도록 해야 한다는 것이 중요한 것이지 신기술을 낮춰 제공해야 한다고?

“적절한 낮춤 방법”, 즉 Graceful degradation은 Fault tolerant 시스템의 다른 말로 문제가 발생하더라도 자체적으로 극복할 수 있는 시스템을 말하는 것이다. 이것은 접근성에 대해 말하기 전에 모든 시스템을 안정적으로 사용하기 위한 근간이 되는 개념이다. 이걸 웹 접근성에 적용하면서 JavaScript를 신기술로 분류하고 JavaScript는 결국 사용자에 따라 적용할 수 없으므로 낮은 수준의 기술로 대안을 제시해야 한다는 황당한 논리를 펴다니. 화면 낭독 프로그램이 JavaScript를 읽어줄 수 있느냐 없느냐로 웹 접근성 개념을 재단해?

그리고 또한 중요한 것은 요즘은 Graceful degradation을 고려하는 시대가 아니라 Progressive enhancement를 내세우는 시대라는 것이다.

웹 접근성을 위한 JavaScript 사용

웹 접근성 연구소의 웹페이지의 내용은 논리가 이상하지만 다행히도 함께 포함된 “콘텐츠 제작 기법” 문서는 그래도 좀 나은 내용을 담고 있다. 일단은 이 PDF 파일을 다운로드 받아 보는 게 제대로 된 접근성 전략을 공부하는 방법 중 하나다.

그러나 우리나라의 어설픈 "표준"이 아니라 국제적으로 합의되고 있는 웹 접근성 “전략” 또는 "지침"을 보는 것이 더 좋다. 우리나라 표준도 사실 이것에 바탕을 두고 있는데 바로 W3C(월드와이드웹컨소시엄)의 Web Accesibility Initiative(WAI)다. 여기서는 접근성에 있어서 웹 접근성 연구소처럼 컨텐트에 대해서만 언급하지 않는다. 다음과 같은 지침(Guideline)이 있다.

이러한 지침을 보면 어디에도 JavaScript가 신기술이니 낮춤 방법을 제공해야 한다는 내용은 없다. 위의 낮춤 방법 제공에 대한 내용이 웹 접근성 연구소에서는 RIA라는 영역에서 제공되므로 WAI에서도 ARIA라는 내용을 보면 근간은 같은 목적을 가지고 있다.

Currently certain functionality used in Web sites is not available to some users with disabilities, especially people who rely on screen readers and people who cannot use a mouse. WAI-ARIA addresses these accessibility challenges, for example, by defining new ways for functionality to be provided to assistive technology. With WAI-ARIA, developers can make advanced Web applications accessible and usable to people with disabilities.

- W3C, WAI-ARIA Overview

즉, 진보된(advanced) 웹 애플리케이션을 장애가 있는 일부 사용자도 접근할 수 있고 사용할 수 있도록 만들 수 있는 지침을 제공한다는 것이다. 이것은 JavaScript에만 한정된 얘기는 아니다. 리치 인터넷 애플리케이션은 플래시, 실버라이트, SVG, HTML5 등으로 멀티미디어를 제공하는 웹 페이지를 말할 수도 있다.

일단 웹 접근성 연구소의 "콘텐츠 제작 기법"에서 JavaScript에 대한 지침은 다음 항목들이 있다.

역시 어설프다. RIA를 접근성 높게 만들기 위한 내용이 아니라 JavaScript가 없더라도 접근하기 좋은 방법에 대해서 주로 얘기하고 있고 결국은 웹 접근성 연구소의 "웹 콘텐츠 접근성"과 중복된다. 단지 기법을 말하고 있을 뿐이다. WAI에서 위에 해당하는 내용은 웹 컨텐트 접근성 지침(WCAG)에 있다. 2008년에 정리된 권고안(recommendation)이다.

또한 WAI에는 이를 준수하기 위한 기법을 여러가지 제공하고 있다.

위의 기법에 나오는 내용은 말하자면 예시일 뿐이지만 웹 접근성 지침을 제대로 준수하기 위해서는 참으로 다양한 경우를 고려해야 함을 알 수 있다. 이게 사실 웹 접근성 연구소의 JavaScript 제작 기법을 일부 포함하고 있는 것이다. 다시 말해 웹 접근성 연구소에서 말하는 JavaScript 제작 기법은 W3C에 있어서는 사실은 웹 컨텐트 접근성 지침에 일부 해당하는 내용이고 정말 Rich Internet Application을 만들 때 접근성을 고려하기 위해서는 W3C의 ARIA를 학습해야 한다. 일부분만 아는 것으로 부족하긴 하지만 ARIA는 다음에 찾아보기로 하고 위에서 "클라이언트측 스크립팅 기법"만 몇 가지 짚어보자.

클라이언트측 스크립팅 기법 예시

SCR2: 키보드와 마우스 이벤트 핸들러를 중복 사용하기

이 기법 예시에서는 웹 접근성 지침 2.1 키보드 접근 가능에 대한 성공 예시를 보여준다. 어떤 꾸밈 이미지를 바꿔주는 이벤트를 처리할 때 마우스와 포커스 이벤트를 줌으로써 키보드도 충분히 지원하게 하는 것이다. 아래와 같이 하면 키보드로 포커스를 주거나 마우스로 이동하거나 하면 이미지가 바뀌게 된다.

<a id="aScr2" href="#"><img id="imgScr2" alt="" src="img/s_login_off.png" /></a>
    var aScr2 = document.getElementById('aScr2');
    var imgScr2 = document.getElementById('imgScr2');

    aScr2.onfocus = aScr2.onmouseover = function() {
        imgScr2.src = imgScr2.src.replace(/_off\.png$/, '_on.png');
    };

    aScr2.onblur = aScr2.onmouseout = function() {
        imgScr2.src = imgScr2.src.replace(/_on\.png$/, '_off.png');
    };

SCR18: 클라이언트측 검증 및 알림 제공

이 기법은 3.3 입력 보조에 대한 예시로서 사용자가 입력하는 값을 클라이언트측 스크립트로 검증하는 것이다. 사실 웹페이지 개발할 때 아주 일반적인 사항이라 웹접근성 측면에서 새로울 것은 없지만 입력값 검증이 그만큼 중요하다는 측면에서 올려본다. 한편 클라이언트측 스크립트로 검증하는 것 만큼 서버측 검증이 제대로 있어야 한다는 것은 당연한 명제다.

<label for="val">값:</label>
<input type="text" name="val" id="val" 
  onchange="if (isNaN(this.value) || this.value < 0) {
      alert('0 이상의 숫자를 입력해주세요.');
      this.focus();
  }" />

SCR24: 사용자 요청으로 새 창을 열게 하는 진보적 개선법(Progressive enhancement)

이 기법은 3.2 예측할 수 있어야 함의 성공 예시다. 웹 페이지에서 사용자가 요청하지 않은 새 창을 열게 되면 사용자는 혼란스럽거나 놓칠 수 있다. 이 기법에서는 원래의 링크는 새 창으로 열지 않지만(HTML에서 새 창을 여는 방법으로 target을 주는 방법이 있지만 HTML 4.01까지는 표준이 아니다) JavaScript를 사용해 새 창으로 연다는 문구를 집어 넣고 새 창으로 열도록 만드는 것이다. 또한 이 과정에서 키보드도 동작하도록 한다. 이 예시는 원래의 예시를 거의 그대로 옮겨본다.

<body onload="addHandlers()">
    <a id="newwin" href="help.html">도움말 보기</a>
</body>
function addHandlers() {
  var objAnchor = document.getElementById('newwin');

  if (objAnchor) {
    objAnchor.firstChild.data = objAnchor.firstChild.data + ' (새 창에서 열림)';
    objAnchor.onclick = function(event){return launchWindow(this, event);}
    // 일부 브라우저는 이벤트 처리시 장치 독립적이지 않아서
    // 아래와 같이 키보드 이벤트를 따로 추가했다
    objAnchor.onkeypress = function(event){return launchWindow(this, event);}
  }
}

function launchWindow(objAnchor, objEvent) {
  var iKeyCode, bSuccess=false;

  // 키보드 이벤트인 경우 엔터 키나 스페이스 키에만 새 창을 열게 한다
  if (objEvent && objEvent.type == 'keypress') {
    if (objEvent.keyCode)
      iKeyCode = objEvent.keyCode;
    else if (objEvent.which)
      iKeyCode = objEvent.which;

    if (iKeyCode != 13 && iKeyCode != 32)
      return true;
  }

  bSuccess = window.open(objAnchor.href);

  // 이 아래는 return !bSuccess; 한 문장이면 되는데 설명을 위해 분리한 것이다
  // 창이 열리지 않은 경우 브라우저의 기본 동작, 즉 같은 창에서 열리도록 한다
  if (!bSuccess)
    return true;

  // 창이 열렸으므로 브라우저가 다음 처리를 하지 않게 한다
  return false;
}

SCR28: 열고 닫을 수 있는 메뉴를 사용하여 컨텐트 일부 건너뛰기

이 기법은 2.4 탐색할 수 있어야 함의 성공 예시다. 웹페이지마다 상단에는 공통되는 내용, 특히 메뉴 같은 걸 넣는 경우가 많은데 이 예시는 JavaScript를 사용하여 특정 블록을 숨길 수 있게 함으로써 사용자가 본문 내용으로 바로 갈 수 있도록 하는 것이다. 이 예시도 원래 예시를 거의 그대로 옮겨 본다.

<script type="text/javascript">
function toggle(id){
    var n = document.getElementById(id);
    n.style.display =  (n.style.display != 'none' ? 'none' : '' );
}
</script>
<button onclick="return toggle('toc');">목차 열기/닫기</button>
<div id="toc">
    ...
</div>

정리하자면...

일부 기법만 예시로 봤지만 예시뿐 아니라 W3C의 웹 접근성 지침을 보자면 JavaScript는 가깝지만 먼 당신이 아니라 웹 페이지를 유용하게 만들 수 있는 적극적인 기술로 인지되고 있음이 분명하다. 국내의 정보화진흥원에서 제정한 웹 접근성 표준처럼 컨텐트 저작할 때의 표준뿐만 아니라 ARIA와 같이 RIA를 만들 때 웹 접근성을 고려하기 위한 기술적 표준도 고려함으로써 제대로된 웹 접근성을 만족할 수 있을 것으로 생각된다.

정리하자면… 참 공부할 게 많다. ARIA는 또 다음 기회에 공부해보기로 하자.