WAI-ARIA 속성을 이용하여 자바스크립트로 구현하는 키보드 네비게이션 접근성 개선

19 Oct 2023

javascript

웹 접근성은 모든 사람들이 웹사이트에 쉽게 접근하고 사용할 수 있도록 하는 것을 목표로 합니다. 그 중에서도 키보드 네비게이션은 시각적이거나 운동 기능에 제한이 있는 사용자들에게 중요한 접근성 요소입니다. 사용자가 키보드의 탐색 키를 사용하여 웹사이트를 쉽게 탐색하고 상호작용할 수 있도록 해주는 것이 좋은 사용성을 제공합니다.

WAI-ARIA(W3C의 웹 접근성 이니셔티브)는 접근성을 개선하기 위한 표준화된 속성들을 제공하는데, 이를 이용하여 자바스크립트로 키보드 네비게이션을 개선할 수 있습니다.

WAI-ARIA 속성 개요

WAI-ARIA(Accessible Rich Internet Applications)은 웹 애플리케이션의 접근성을 개선하기 위한 W3C의 기술입니다. WAI-ARIA 속성을 사용하여 요소의 역할(role), 속성(property) 및 상태(state)를 정의할 수 있습니다.

키보드 네비게이션을 위한 WAI-ARIA 속성

WAI-ARIA를 사용하여 키보드로 탐색할 수 있는 요소를 만들기 위해서는 몇 가지 속성을 사용해야 합니다. 이를 통해 사용자는 키보드의 탐색 키를 사용하여 요소를 선택하고 상호작용할 수 있습니다.

role=”navigation”

키보드로 탐색할 수 있는 네비게이션 요소를 정의하기 위해 role="navigation" 속성을 사용할 수 있습니다. 이를 통해 스크린 리더 사용자가 해당 요소를 인식하고 탐색할 수 있습니다.

<nav role="navigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

tabindex 속성 사용

tabindex 속성을 사용하여 키보드 포커스를 지정할 수 있습니다. 이를 통해 사용자는 키보드의 탐색 키를 사용하여 요소들을 이동할 수 있습니다.

<a href="#" tabindex="0">Clickable Element</a>

tabindex 속성 값으로 숫자를 사용하는데, 0은 탭 키를 사용하여 포커스할 수 있음을 의미하고, -1은 포커스할 수 없음을 의미합니다.

aria-pressed 속성 사용

aria-pressed 속성을 사용하여 토글 버튼과 같은 상태를 나타낼 수 있습니다. 이를 통해 사용자는 키보드의 스페이스키를 사용하여 상태를 변경할 수 있습니다.

<button aria-pressed="false">Toggle Button</button>

위의 예제에서 aria-pressed="false"는 버튼이 현재 비활성화 상태임을 나타냅니다. 버튼이 활성화되면 aria-pressed 속성 값을 true로 변경하여 사용자에게 상태를 알릴 수 있습니다.

자바스크립트로 WAI-ARIA 속성 구현하기

위에서 소개한 WAI-ARIA 속성을 자바스크립트로 구현하기 위해서는 DOM 요소를 선택하고 속성을 설정하거나 변경해야 합니다.

// 네비게이션 요소 선택
var navigation = document.querySelector('nav');

// role 속성 설정
navigation.setAttribute('role', 'navigation');

// 클릭 가능한 요소 선택
var clickableElement = document.querySelector('a');

// tabindex 속성 설정
clickableElement.setAttribute('tabindex', '0');

// 토글 버튼 선택
var toggleButton = document.querySelector('button');

// aria-pressed 속성 설정
toggleButton.setAttribute('aria-pressed', 'false');

위의 예제에서는 setAttribute() 함수를 사용하여 속성을 설정하고 변경하는 방법을 보여주고 있습니다.

결론

WAI-ARIA 속성을 사용하여 자바스크립트로 키보드 네비게이션을 개선하는 것은 웹사이트의 접근성을 높이는 중요한 요소입니다. 이를 통해 시각적이거나 운동 기능에 제한이 있는 사용자들이 웹사이트를 더 쉽게 탐색하고 사용할 수 있습니다. WAI-ARIA 속성을 적절히 활용하여 접근성을 개선하는 데에 신경을 쓰면 더 나은 웹 경험을 제공할 수 있습니다.

자세한 내용은 WAI-ARIA 문서를 참조하시기 바랍니다.

#Accessibility #WAI-ARIA