비밀번호 표시에 웹 접근성 및 사용자를 위한 tabIndex 활용

개요

회원가입 폼을 만들면서 비밀번호와 비밀번호 확인 입력 공간에 눈 아이콘을 클릭하면 암호화된 비밀번호를 볼 수 있는 기능을 개발하고 싶었다. 기능 개발 이후 테스트를 하는데 자연스럽게 tab키로 작성란을 이동했고, 비밀번호를 표시하는 눈 아이콘에 포커스가 되었다. 보통 같으면 포커스가 되지 않아야 정상 아닌가? 라고 생각했고, 웹 접근성을 고려해봐도 그렇게 필요없는 포커스라고 생각되어 tabIndex에 대해 찾아보게 되었다.

 

tabIndex

tabIndex란?

tabindex 전역 특성은 요소가 포커스 가능함을 나타내며, 이름에서도 알 수 있듯, 주로 Tab 키를 사용하는 연속적인 키보드 탐색에서 어느 순서에 위치할지 지정한다. 라고 공식 문서에서 설명한다. 앞에 설명에 따르면 tabindex를 사용해서 포커스의 순서나 포커스 여부를 결정할 수 있다.

 

사용 가능 항목

 <a>, <button>, <details>, <input>, <select>, <textarea> 등 포커스가 가능한 태그들에 사용 가능하지만, <div>나 <p> 태그처럼 글이 들어간 요소에도 사용이 가능하다.

 

사용 방법

사용 방법은 간단하다. tabindex의 값으로 문자형 숫자가 들어가는데 tabindex="0"이 기본값이고 양의 정숫값은 낮은 숫자 1부터 접근 먼저 접근이 가능하다. 최댓값은 32767이라고 설명되어 있다.

음의 정숫값(보통 tabindex="-1")은 tab키보드로 접근이 불가능 하나 JavaScript나 마우스 클릭으로는 포커스가 가능하다. 보통 JavaScript를 사용한 위젯의 접근성 확보를 위해 사용한다.

 

사용 예시

import React from "react";

const MainPage = () => {

  return (
    <div>
      <div tabIndex={0}>div태그 입니다.</div>
      <p>p태그 입니다.</p>
      <form
        style={{ width: "300px", display: "flex", flexDirection: "column" }}
      >
        <input tabIndex={2} placeholder="아이디"></input>
        <input tabIndex={1} placeholder="비밀번호"></input>
        <input tabIndex={-1} placeholder="비밀번호 확인"></input>
        <button>버튼</button>
      </form>
    </div>
  );
};

export default MainPage;

 

포커스 되지 않는 태그에 tabindex를 활용하면 포커스를 가능하게 할 수 있고, tabindex의 숫자의 값에 따라 포커스 되는 순서를 결정할 수 있다. 기본값인 0 보다는 양의 정숫값인 1과 2가 먼저 포커스가 되는 것을 확인할 수 있고, 포커스 되어야 하는 input값 비밀번호 확인 부분이 tabindex -1을 사용해서 포커스를 무시할 수 있다.

 

마무리

접근성의 순서에 대해 고민해본 적은 있지만 포커스를 제거하고, 제어할 수 있는 방법에 대해서는 이번 기능을 통해 처음 알게 되었다. 역시 여러 기능을 구현해 보면서 경험 해보는 것이 중요한 것 같다.