전에 WAI-ARIA에 대한 포스팅을 했는데 다시 읽어보니 내용들이 왜이렇게 생소한지, 그간 내가 얼마나 많은 부분을 간과했는지 깨달을 수 있었다.
오늘은 복습을 하며 유튜브 뮤직에서 키보드 접근과 이동에 대해 개발자 도구를 열어 살펴 보았다.
맨 처음 페이지에서 tab키로 접근했을 때 "홈 아이콘"으로 포커스가 간다.
"홈 아이콘"에서 다시 한 번 tab키를 누르면 옆에 둘러보기로 가는 것이 아닌 검색 아이콘으로 이동하는 것을 알 수 있다.
여기서 드는 의문은 그렇담 둘러보기랑 보관함은 어떻게 접근하지?
개발자 도구에서 사용된 요소들로 확인할 수 있다.
role="tab"
aria-selected="true"
tabindex="0"
이렇게 세 가지를 확인할 수 있는데, role="tab"은 role="tablist"와 짝꿍처럼 쓰인다고 보면 된다.
한 칸 위 부모 태그의 속성들을 보면
role="tablist"
tabindex="0"
인 것을 확인할 수 있다.
이름에서 유추할 수 있는 tablist는 목록의 역할을 하며 tab은 list의 각각의 item이라고 이해하면 쉽다.
tablist로 감싸인 tab들은 화살표 방향키로 선택하여 이동이 가능하다.
그렇다면 스크린 리더기에는 어떻게 읽힐까?
스크린 리더기를 켠 상태에서 페이지에서 tab키를 조작해 접근하면 왼쪽 상단의 로고에 먼저 접근하게 되고 그 후에 "홈"으로 가게 되는데, 그 때 스크린 리더기는 list임을 명시하고 방향키로 '둘러보기','보관함'에 접근했을 때 리스트라는 안내 대신 3개 중 몇 번째에 있는 요소에 도달했는지 알려준다. 그리고 한 쪽 방향키를 지속적으로 돌렸을 때 리스트에서 탈출하지 않고 1,2,3,1,2,3,1... 이런식으로 돌아가게 된다.
여기서 깨달은 부분은 방향키로 각 tab에 접근할 때 tablist 안에 있는 3개의 탭 중 포커스가 가 있지 않은 나머지 두 개가 동적으로 tabindex="-1" 처리되는 부분이라는 것.
tabindex="-1"은 tab키가 기존에 접근할 수 있는 a 태그와 같은 태그에 강제로 접근을 하지 못하게 만들어주는 역할을 하는데, tab의 이동을 막고 방향키를 통한 조작을 돕게 해준다는 것을 알게 되었다.
개인 프로젝트에서 데이트픽커를 만들었는데 모두 tab키로만 이동이 가능하여 날짜 부분만 방향키로 어떻게 처리할까 고민하던중 고맙게도 유튜브 뮤직 분석을 통해 힌트를 얻게 되었다! 추후에 해결하면 추가로 포스팅해보겠다.
또 흥미로웠던 부분은 사용자 프로필 아이콘을 눌렀을 때 리더기에 popup button 이라는 정보를 주는데 클릭했을 때 리스트가 나오는 팝업창과 같은 요소가 나오는 태그에 aria-haspopup="true"를 주면 이와같이 리더기 사용자에게 정보를 전달한다.
분석을 해보며 아쉬웠던 부분은 포커싱된 부분이 어떠한 정보를 가졌는지 정확히 전달되지 않고 단순히 "링크"라는 정보만 전달되는 부분이 매우 아쉬웠다.
