List

접근성 핵심 사항

• 키보드 내비게이션을 적용하여 효율적으로 탐색 가능하도록 한다.
• aria-orientation attribute를 사용하여 리스트의 방향을 알 수 있도록 한다.

구현 사항

키보드 네비게이션

• direction prop으로 내비게이션 방향을 결정합니다(row/col).
  • direction이 row인 경우, ←→키로 포커스를 이동합니다. ↑↓ 는 동작하지 않습니다.
  • direction이 col인 경우, ↑↓키로 포커스를 이동합니다. ←→ 는 동작하지 않습니다.
• 키 설명
  • ↑/←: 이전 요소로 포커스를 이동합니다. 현재 포커스 된 요소가 계층 내 처음 요소일 경우 이동하지 않습니다.
  • ↓/→: 다음 요소로 포커스를 이동합니다. 현재 포커스된 요소가 계층 내 마지막 요소일 경우 이동하지 않습니다.
  • Home(macOS의 경우 ⌘+↑/←): 리스트 내 첫 번째 요소로 포커스를 이동합니다.
  • End(macOS의 경우 ⌘+↓/→): 리스트 내 마지막 요소로 포커스를 이동합니다.

 

고민한 사항

tab sequence 관리 - li태그 자체에 포커스를 주는 것이 옳은가?

 

HTML요소가 포커스를 가지는 경우는 크게 다음과 같다

• 상호작용 가능한 경우(button, a 태그 등).
• 의미 있는 정보를 담고 있는 경우(아티클의 본문 등)

li는 리스트 아이템이 가지는 콘텐츠를 묶어주는 컨테이너 역할을 하는 요소이다. 따라서 위 사항에 해당하지 않으므로, 그 자체로 포커스를 가질 필요는 없다고 판단하여 li를 거치지 않고 내부 요소로 바로 포커스를 이동하도록 구현하였다.

하지만 li 내부에 포커스를 받을 수 있는 요소 개수가 많아질 경우, 해당 요소들을 모두 거쳐야 다음 li로 포커스를 옮길 수 있기 때문에 탐색이 불편해진다는 문제가 발생한다.

 

썸네일, 제목, 작가 등 모든 정보를 탐색해야 다음 웹툰으로 이동할 수 있다

그러한 경우 li요소를 포커스 가능한 요소로 구현하고, tab sequence 계층을 추가한다면 문제를 해결할 수 있을 것으로 보인다. 다시 말해, 마치 li가 탭 역할을 하고 li 내부의 콘텐츠가 탭패널 역할을 하는 것처럼 키보드 내비게이션을 구현한다면 유저 입장에서는 li사이를 빠르게 이동하며 원하는 콘텐츠를 탐색하고, 필요한 경우 탭으로 진입함으로써 웹페이지를 더 빠르고 편리하게 이용할 수 있을 것이다.

 

결론적으로, 보다 사용성이 좋은 키보드 내비게이션을 구현하려면 tab sequence를 제어해야한다. 이때 탭메뉴, 중첩리스트 등 유사한 키보드 네비게이션을 지원하는 다른 컴포넌트와의 상호작용을 고려해야 하며, 제어해야 하는 키의 종류가 늘어남에 따라 브라우저나 OS 기본 동작과의 충돌도 고려해야 한다. 따라서 해당 이슈는 지금 바로 List컴포넌트의 props으로 제어하도록 구현하지 않고 추후에 업데이트하는 것으로 결정하였다.