[JavaScript] 자바스크립트를 이용한 HTML에서의 키보드 포커스 이동

자바스크립트를 이용한 HTML에서의 키보드 포커스 이동

개요

프로그래밍에서는 이벤트 처리가 매우 중요하다.

• 마우스 커서가 특정 객체 위에 올라왔을 때
• 마우스로 특정 객체를 클릭했을 때
• 키보드의 특정 키를 입력 했을 때

이외에도 아주 다양한 경우들이 존재하는데
프로그래머는 사용자의 다양한 동작에 반응하는 프로그램을 만들 수 있어야 한다.

이러한 이벤트 처리가 가장 많이 일어나는 곳은
아무래도 '게임' 분야일 거라고 생각한다.

---

나 또한 요즘 웹을 이용한 게임 개발에 대해 흥미를 가지고 있던 참이라
웹에서의 이벤트 처리에 대해 공부하고 있다.
그 과정에서 '키보드 포커스'를 이동시키는 방법에 대해 알게 되어
여기에 정리하려고 한다.

---

키보드 포커스를 이동시키는 focus 메소드

사용법은 아래와 같다.

• <Dom 객체>.focus();

html의 dom 객체가 기본으로 가지고 있는 메소드로서,
위의 메소드를 실행하면
키보드 포커스가 해당 객체 위치로 이동하게 된다.

예시

<button 
    onclick="document.getElementById( 'go-to-button' ).focus();">
이동</button>

이렇게 작성하면,
해당 버튼을 눌렀을 때 ID 값이 'go-to-button'인 엘리먼트로 이동하게 된다.

---

유용한 활용 방법 - (UX)

이 기능은 많은 웹서비스에서 사용되고 있는데,
대표적으로 회원가입을 예로 들 수 있다.

어떠한 서비스에 회원가입을 하려면
전화번호, 생년월일, 주민등록번호 등이 필요하다.

그런데 이 세 가지는 모두 숫자의 길이가 정해져있다.
전화번호로 예를 들면

• 010-1234-5678
  첫 번째 자리는 010 (3자리)
  두 번쨰 자리는 1234 (4자리)
  세 번째 자리는 5678 (4자리)

이렇게 말이다.
그래서 첫 번째 번호 3개를 모두 입력하면
사용자가 탭키나 마우스 등을 이용해 다음 칸으로 이동하지 않더라도
자동으로 다음 입력 부분으로 포커스를 넘겨
우수한 사용자 경험(UX)를 제공해주는 방식이다.

---

유용한 활용 방법 - (접근성)

이처럼 키보드 포커스를 이동시켜주는 기능은
일반 사용자에게 편의를 제공해 주는 용도로도 쓰이지만,

스크린리더 등의 보조 프로그램을 사용하고 있는 사용자들에게
더욱 효과적으로 적용할 수 있는 기술이다.

1. 바로가기 기능
   
   네이버 등의 포털사이트 상단에 보면
   스크린리더 사용자를 위한 '바로가기' 버튼이 제공되고 있는 걸 알 수 있다.
   '본문으로 바로가기', '대메뉴로 바로가기', '내용으로 건너띄기' 등으로 되어 있기도 하다.
   이러한 버튼들 역시 버튼을 클릭하면 특정 위치로 키보드 포커스를 이동시키는
   focus()메소드를 사용하고 있다고 볼 수 있다.
2. 시각 기능 대체
   
   이 외에도 focus()의 활용 방법은 다양하다.
   타이머나 스톱워치, 시계 등 실시간으로 변하는 값을 확인해야 할 때
   스크린리더 사용자들에게 유용하게 사용될 수 있다.

---

페이지 상단에 타이머가 위치하고
페이지 하단에서는 문제를 풀어야 하는 시험 응시 사이트가 있다고 가정해보자.

이런 경우, 키보드를 이용해 페이지를 탐색하는 스크린리더 사용자들은
페이지 하단에서 문제를 풀고
방향키나 탭키를 이용해 페이지 상단에 있는 시계까지 이동해야만
현재 남은 시간을 확인할 수 있다.

그리고 다시 이어서 문제를 풀기 위해
방향키나 탭키 등으로 해당 문제가 있는 위치까지 이동해야 할 것이다.

정상적인 시력이 존재하는 일반 사용자들의 경우에는
상단에 있는 시계를 눈으로 확인하면 되기 때문에
전혀 문제가 없지만,

시각을 이용해서 컴퓨터를 볼 수 없는 사용자들은
이러한 문제를 겪게 된다.

만약, 이때 시계가 있는 곳으로 키보드 포커스를 옮겨주는 단축키가 있다면?
그리고 이전에 있었던 위치로 다시 키보드 포커스를 되돌리는 단축키도 존재한다면?

스크린리더를 사용하는 사용자는 단축키를 이용해
재빠르게 남은 시간을 확인하고
어렵지 않게 원래 풀고 있던 문제를 계속해서 풀 수 있을 것이다.

심지어 이 과정에서 소모되는 시간은
시력이 정상인 사용자들과 크게 다르지 않을 것이다.

---

마무리

이런식으로 focus() 메소드를 사용할 수도 있겠다는 생각이 들었다.
이것은 특히 웹게임을 개발할 때 유용하게 쓰일 것이며,
그 중에서도 접근성을 고려하여 시각장애인 사용자들도 즐길 수 있는 게임을 만들 때
더욱 빛을 바랄 것이다.