자바스크립트를 활용한 키보드 접근성 개선 방법

19 Oct 2023

javascript

키보드 포커스 관리하기
- tabindex 속성을 이용하여 요소에 키보드 포커스를 설정할 수 있습니다. tabindex=”0”은 포커스 가능 요소이며, tabindex=”-1”은 포커스 가능하지만 처음부터 순서에 포함되지 않는 요소입니다.
- focus() 함수를 사용하여 요소에 포커스를 이동할 수 있습니다. 예를 들어, 페이지 로딩 후 특정 요소에 자동으로 포커스를 설정하거나, 버튼 또는 링크를 클릭한 후에 다음 요소로 포커스를 이동할 수 있습니다.
키보드 이벤트 처리하기
- keyboard event를 사용하여 사용자의 키보드 입력을 처리할 수 있습니다. 주요 keyboard event는 keydown, keyup, keypress입니다.
- 각 키보드 이벤트에 대한 콜백 함수를 작성하여 사용자의 입력을 처리할 수 있습니다. 예를 들어, Enter 키를 눌렀을 때 버튼을 클릭하는 기능을 구현할 수 있습니다.
키보드 접근성 가이드라인 준수하기
- 웹 콘텐츠 접근성 가이드라인에 따라 키보드 접근성을 개선하는 것이 중요합니다. 가이드라인에는 키보드 포커스 스타일링, 키보드 네비게이션 제공, 키보드 접근 가능한 플러그인 및 위젯 사용 등에 대한 권장 사항이 포함되어 있습니다.

다음은 자바스크립트를 활용한 키보드 접근성 개선 예시 코드입니다.

// 특정 요소에 포커스 설정하기
const element = document.getElementById('myElement');
element.focus();

// 버튼 클릭 후 다음 요소로 포커스 이동하기
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  const nextElement = document.getElementById('nextElement');
  nextElement.focus();
});

// Enter 키를 눌렀을 때 버튼 클릭하기
const button = document.getElementById('myButton');
button.addEventListener('keydown', (event) => {
  if (event.keyCode === 13) {
    button.click();
  }
});

자바스크립트를 활용하여 키보드 접근성을 개선하는 방법에 대해 알아보았습니다. 이러한 방법을 적용하여 웹 사이트나 애플리케이션을 키보드만으로도 편리하게 사용할 수 있도록 개선해보세요.

참고 자료:

“Web Content Accessibility Guidelines (WCAG)”