팀 프로젝트인 가지마켓 서비스를 진행하면서 프로젝트의 목표 중 웹 접근성 중 키보드 접근성을 고려하며 tabindex에 대한 것을 알게 되었다.
tabindex
tab 키를 이용해서 웹 페이지에서 각 요소에 포커스를 잡을 수 있는데 가능한 요소로는 <input>, <textarea>, <button>, <a>가 있다. 만약 <div>와 같이 일반적으로 포커스를 갖지 않는 요소에 포커스를 갖게 하고자 한다면 이 때 사용하는 것이 tabindex이다.
tabindex는 포커스를 갖게 하는 것 뿐만 아니라 포커스의 이동 순서를 제어할 수 있다.
만약 아래와 같은 코드가 있다.
<div tabindex="0">무엇이든 물어보세요</div>
<label>질문 1:<input type="text" /></label>
<button>버튼을 클릭하세요</button>tabindex="0"을 사용해서 포커스를 갖지 않는 div가 포커스를 잡을 수 있도록 제어할 수 있다.
<div tabindex="0">무엇이든 물어보세요</div>
<label>질문 1:<input type="text" /></label>
<p tabindex="0">언제든 물어보세요</div>
<label>질문 2:<input type="text" tabindex="2"/></label>
<button tabindex="1">버튼을 클릭하세요</button>tab을 이용한 포커스 이동은 위에서 아래로 코드를 읽으면서 이동을 하는데 만약 순서를 제어하고자 한다면 tabindex="양수"를 입력하면 된다. 양수의 작은 수, 1부터 순서로 진행되고 0을 마지막으로 포커스를 잡는다. 0은 기본적으로 포커스를 잡을 수 있는 요소와 같은 순서를 가진다.
위와 같은 예시로 보면 1, 2, 0 순서로 진행된다. 그러면 포커스를 잡는 순서는 button -> 질문 2의 input -> div -> 질문 1의 input -> p의 순서로 진행된다.
<div tabindex="0">무엇이든 물어보세요</div>
<button tabindex="-1">버튼을 클릭하세요</button>만약 기본적으로 포커스를 잡는 요소이지만 포커스를 잡지 않도록 하기 위해서는 tabindex=-1을 사용해주면 된다.
tabindex를 사용한 이유
tabindex를 사용한 이유는 2가지 이유가 있다.
- 코드의 위에서부터 순서대로 읽는데 내가 생각한 tab의 이동이 되지 않아 tab 순서를 제어하기 위해서
- 내가 원하는 곳에 포커스가 잡히지 않아서
위에서부터 코드를 읽으니 header부터 읽게 되고 main에 작성된 콘텐츠부터 읽었으면 하는 생각과 다른 순서로 tab의 포커스가 이동하게 되었다. 또한 li로 작성된 내용에 포커스가 잡히지 않는 문제점이 발생해서 tabindex를 사용하게 되었다.
tabindex를 사용한 코드 일부를 가져오면 다음과 같다.
<body>
<header class="top nav-basic">
<h1 class="a11y-hidden">채팅방 리스트 페이지</h1>
<button class="btn-back"><img src="../assets/icon/icon-arrow-left.svg" alt="뒤로가기 버튼"></button>
<button class="btn-option"><img src="../assets/icon/icon-more-vertical.svg" alt="더보기 버튼"></button>
</header>
<main>
<ul class="chat-list" tabindex="1">
<li class="user-chat-list">
<p class="a11y-hidden"><span class="a11y-hidden">사람1의</span>채팅방</p>
<a href="#" class="user-chat-content new-chat" tabindex="1">
<div class="user-img img-cover">
<img class="profile-img" src="../assets/profile_imgs/user6.jpg" alt="사용자 이미지">
<span class="profile-dot"></span>
</div>
<div class="user-info">
<p class="user-name">애월읍 위니브 가지밭</p>
<p class="chat-content ellipsis">이번에 정정 언제하멘마씸?</p>
</div>
<p class="chat-date"><span class="a11y-hidden">가장 최근에 연락 온 날짜</span>2023.06.23</p>
</a>
</li>
</ul>
</main>
<footer>
<nav class="tab-menu">
<p class="a11y-hidden">하단 탭 메뉴</p>
<ul class="tab-item-list">
<li class="tab-item-home">
<a href="#" tabindex="1">
<p>홈<span class="a11y-hidden">화면으로 이동</span></p>
</a>
</li>
<li class="tab-item-chat">
<a href="#" tabindex="1">
<p>채팅<span class="a11y-hidden">화면으로 이동</span></p>
</a>
</li>
</ul>
</nav>
</footer>
</body>
</html>tabindex를 사용하지 않으면 header에 작성된 button부터 읽고 아래로 내려오면서 a 태그를 사용한 코드로 포커스가 이동한다.
하지만 나는 main -> footer -> header 순서로 포커스가 이동하였으면 했다. 그래서 기본적으로 포커스를 갖지 않는 ul에 tabindex="1"을 주고 main에 작성된 a, footer에 작성된 a에도 tabindex를 사용했다.
위와 같이 작성하니 내가 원하는 순서로 tab이 이동하지만 tabindex를 요소마다 넣을 생각을 하니 코드가 너무 깔끔하지 않을 것 같다는 생각이 들었다.
이를 개선할 수 있는 방법에 대해 더 고민할 필요가 있다는 생각이 들었다.
