WAI-ARIA 속성을 활용한 자바스크립트 스킵 내비게이션의 접근성 개선 방법

19 Oct 2023

javascript

접근성은 모든 사용자가 웹 사이트나 애플리케이션을 사용할 수 있도록 보장하는 중요한 요소입니다. 특히 시각 장애인이나 모바일 기기 사용자와 같은 특수한 사용자 그룹을 위해 웹 접근성을 개선해야합니다. 자바스크립트 스킵 내비게이션은 이러한 개선을 위한 효과적인 방법 중 하나입니다.

스킵 내비게이션 이해하기

스킵 내비게이션은 주로 키보드를 사용하며 웹 사이트를 탐색하는 사용자들을 위한 기능입니다. 이 기능을 사용하면 사용자는 웹 페이지의 메인 콘텐츠로 즉시 이동할 수 있으며, 탐색 중 잡음이나 반복적인 콘텐츠를 건너뛸 수 있게 됩니다.

WAI-ARIA 속성 활용하기

WAI-ARIA(웹 접근성을 개선하기 위한 인터페이스 협약)는 HTML 요소의 접근성을 향상시키기 위한 표준입니다. 스킵 내비게이션에는 몇 가지 WAI-ARIA 속성을 활용할 수 있습니다. 아래는 주요한 속성들입니다.

role="navigation": 스킵 내비게이션 영역을 정의하는 역할을 부여합니다.
role="link": 내비게이션 링크 요소에 부여하여, 키보드 포커스가 해당 링크로 이동할 수 있도록 지원합니다.
tabindex: 스킵 링크에 이벤트 처리를 가능하게 하기 위해 tabindex 속성을 추가합니다.
aria-label 또는 aria-labelledby: 스킵 링크에 대한 설명을 제공하는 데 사용됩니다.

아래는 WAI-ARIA 속성을 활용해 작성된 자바스크립트 스킵 내비게이션의 예입니다.

<!-- 스킵 내비게이션 -->
<div id="skip-nav" role="navigation">
  <a href="#main-content" tabindex="1">본문으로 건너뛰기</a>
</div>

<!-- 메인 콘텐츠 -->
<div id="main-content">
  <!-- 콘텐츠 내용 -->
</div>

스킵 내비게이션의 구현 방법

스킵 내비게이션을 구현하기 위해서는 다음 단계를 따를 수 있습니다.

스킵 링크를 생성하고, 메인 콘텐츠 영역으로 연결시킵니다.
CSS를 활용하여 스킵 링크를 시각적으로 숨깁니다.
자바스크립트를 이용하여 스킵 내비게이션을 키보드 포커스를 제어하도록 만듭니다.

아래는 예시 코드입니다.

<!-- head 태그 안에 스타일 시트 추가 -->
<style>
  #skip-nav {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
</style>

<!-- body 태그 하단에 자바스크립트 추가 -->
<script>
  // 스킵 내비게이션 영역에 포커스를 이동시키는 함수
  function focusSkipNav() {
    document.getElementById("skip-nav").focus();
  }

  // 스킵 내비게이션 영역을 처음 로딩시에만 숨기도록 설정하는 함수
  function hideSkipNav() {
    document.getElementById("skip-nav").style.left = "-10000px";
  }

  // 페이지 로딩 후에 스킵 내비게이션 기능을 설정하는 이벤트 핸들러
  window.onload = function() {
    hideSkipNav();
    document.getElementById("skip-nav").addEventListener("focusin", function() {
      this.style.left = "20px";
    });
  };
</script>

<!-- 스킵 내비게이션 -->
<div id="skip-nav" role="navigation">
  <a href="#main-content" tabindex="1" onclick="focusSkipNav()">본문으로 건너뛰기</a>
</div>

<!-- 메인 콘텐츠 -->
<div id="main-content">
  <!-- 콘텐츠 내용 -->
</div>

요약

WAI-ARIA 속성과 자바스크립트를 활용한 스킵 내비게이션은 웹 사이트의 접근성을 개선하는 강력한 도구입니다. 이를 통해 시각 장애인과 모바일 기기 사용자를 포함한 모든 사용자에게 콘텐츠에 빠르게 접근할 수 있는 기능을 제공할 수 있습니다. 스킵 내비게이션을 구현하고자 할 때는 WAI-ARIA 속성을 올바르게 활용하고, 스타일 및 자바스크립트를 적절히 조합하여 구현해야 합니다.

스킵 내비게이션 이해하기

WAI-ARIA 속성 활용하기

스킵 내비게이션의 구현 방법

요약

References