웹 접근성은 모든 사용자가 웹사이트나 웹 애플리케이션을 동등하게 이용할 수 있도록 하는 것을 의미합니다. 이를 위해 키보드 포커스 컨트롤을 개발하는 것은 매우 중요합니다. 사용자들은 마우스가 아닌 키보드를 통해 웹사이트에 접근할 수 있어야 합니다.

여기에는 자바스크립트를 사용하여 웹 접근성을 고려한 키보드 포커스 컨트롤을 개발하는 방법을 안내하겠습니다.

1. HTML 요소에 tabindex 속성 추가하기

키보드 포커스를 받을 수 있는 요소들에 tabindex 속성을 추가해야 합니다. tabindex 속성은 키보드 탭 키를 사용하여 요소들 간에 이동할 때 사용됩니다. 보통 0 이상의 양수 값을 가지며, 작은 숫자일수록 먼저 포커스를 받습니다.

<button tabindex="1">버튼 1</button>
<button tabindex="2">버튼 2</button>
<button tabindex="3">버튼 3</button>

2. 키보드 이벤트 리스너 추가하기

다음으로, 키보드 이벤트 리스너를 추가하여 키보드로 요소를 조작할 수 있도록 합니다. 주요 키보드 이벤트는 다음과 같습니다.

• keydown: 키를 누를 때 발생합니다.
• keyup: 키를 뗄 때 발생합니다.
• keypress: 키를 누르고 있을 때 반복해서 발생합니다.

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('keydown', event => {
    if (event.key === 'Enter' || event.key === ' ') {
      // 실행할 로직 작성
      event.preventDefault(); // 기본 행동 방지
    }
  });
});

3. 포커스 스타일 변경하기

키보드 포커스를 받을 때, 사용자에게 시각적인 피드백을 주기 위해 포커스 스타일을 변경할 수 있습니다. 예를 들어, 포커스된 요소의 배경색을 변경하거나, 테두리를 추가할 수 있습니다.

button:focus {
  background-color: yellow;
  outline: 2px solid blue;
}

4. 사용자 경험 향상을 위한 추가 기능 구현하기

키보드 포커스 컨트롤을 개선하기 위해 몇 가지 추가 기능을 구현할 수 있습니다. 예를 들어, 키보드로 탭 키를 이용하여 요소간에 포커스를 이동할 때 첫 번째 요소와 마지막 요소 사이에서 루프되도록 설정할 수 있습니다.

document.addEventListener('keydown', event => {
  if (event.key === 'Tab') {
    const focusableElements = document.querySelectorAll('button');
    const firstElement = focusableElements[0];
    const lastElement = focusableElements[focusableElements.length - 1];
    
    if (event.shiftKey) {
      // shift + tab: 역순으로 탐색
      if (document.activeElement === firstElement) {
        event.preventDefault();
        lastElement.focus();
      }
    } else {
      // tab: 순차 탐색
      if (document.activeElement === lastElement) {
        event.preventDefault();
        firstElement.focus();
      }
    }
  }
});

위의 방법을 통해 자바스크립트를 사용하여 웹 접근성을 고려한 키보드 포커스 컨트롤을 개발할 수 있습니다. 이를 통해 모든 사용자들이 키보드를 통해 쉽게 웹사이트를 탐색하고 상호작용할 수 있습니다.

더 많은 정보를 알고 싶다면 W3C의 접근성 가이드를 참조하시기 바랍니다.

#웹접근성 #키보드포커스