- 1.1 JavaScript에 관한 오해
- 1.2 접근성 있는 JavaScript 코딩 방법
- 1.2.1 적절한 낮춤(Graceful Degradation)
- 1.2.2 점진적 향상(Progressive Enhancement)
- 1.2.3 겸손한 구현(Unobtrusive)
1.2 접근성 있는 JavaScript 코딩 방법
접근 가능한 웹 콘텐츠를 개발하는 과정에서 JavaScript를 적용하는 방법에는 세 가지가 있다. 첫째는 JavaScript 코딩시에 접근성을 크게 고려하지 않고 우선 웹 콘텐츠를 개발하고, 이후에 접근성을 떨어뜨리는 부분을 하나씩 해결해 나가는 방법이다. 둘째는 HTML과 CSS를 사용하여 우선 웹 콘텐츠를 구현하고, 상호작용이 필요한 부분을 JavaScript로 코딩하는 방법이다. 세 번째 방법은 두 번째 방법에서 JavaScript로 코딩하는 부분을 스크립트를 제거하더라도 웹 콘텐츠의 이용에 문제가 없는 수준까지로 제한하는 방법이다.
1.2.1 적절한 낮춤(Graceful Degradation)
JavaScript를 이용하여 접근성을 지원하는 웹 콘텐츠를 개발하는 과정에서 HTML, CSS 및 JavaScript를 이용하여 코딩하고, 접근성이 떨어지는 부분의 JavaScript 부분을 대체기법을 이용하여 보완하는 방법이다. 이 방법은 고도의 JavaScript 코딩방법을 우선 적용한 후에 접근성을 제공할 수 없는 스크립트 부분을 HTML이나 CSS로 재작업을 하게 된다. 따라서 높은 기술 수준의 스크립트를 낮은 수준의 HTML이나 CSS 코딩으로 대체해 나가므로 이를 ‘적절한 낮춤’이라고 한다.
일반적으로 접근성을 지원하는 코딩방법이 어렵거나 보조 기술의 한계가 있는 개발방법을 높은 수준의 기술이라고 하고, 반대로 HTML 기술을 가장 낮은 단계의 기술이라고 할 수 있다. 예를 들어 Flash, Flex, JavaScript 등을 이용한 코딩 기술이 높은 수준의 기술이라고 할 수 있으며, 그 다음은 CSS, 그리고 HTML 기술의 순서로 기술수준이 낮다고 할 수 있다.
아래 보인 코드는 JavaScript로 구현한 프로그램으로 문서의 일부 영역에 도움말 링크를 동적으로 제공하는 코드이다. 이 부분은 JavaScript를 지원하지 않는 상황에서도 접근성을 보장하기 위해서 noscript 요소를 이용해서 대체 콘텐츠를 제공하고 있다. 따라서 기술 수준의 적절한 낮춤을 통해 접근성을 향상시키고 있다.
우수 사례
사례 이미지
[그림] 스크립트가 작동할 때(좌)와 작동하지 않을 때(우)
사례 코드
<script type="text/JavaScript">
var width = 600;
document.write(‘<div id="sublayer" style="width:’ + width + ’">’);
document.write(‘<p><a href="help.html">도움말</a></p>’);
document.write(‘</div>’);
</script>
<noscript>
<p><a href="help.html">도움말</a></p>
</noscript>적절한 낮춤 방법을 적용하면 신기술을 사용할 때, 신기술을 지원하지 않는 환경에 대한 접근성을 보장할 수 있다. 특히 신기술이 제공하는 기능이 매우 많고 복잡한 경우에 핵심기능만을 간추려서 대체 콘텐츠를 제공할 수 있기 때문에 효과적으로 접근성을 보장할 수 있다. 여기서 신기술이라 함은 우리나라의 보조 기술이 지원하지 못하는 기술을 의미한다. 예를 들어 우리나라의 화면 낭독 프로그램이 JavaScript를 충분히 지원하지 못하고 있으므로, JavaScript를 이용한 웹 콘텐츠 구현 기술은 신기술로 분류될 수 있다. 만일 우리나라에서 구입 가능한 화면 낭독 프로그램이 JavaScript를 충분히 지원하게 된다면 JavaScript는 더 이상 신기술로 분류되지 않을 것이다.
