tab, focus

우리는 키보드의 tab 키를 눌러서 웹 서핑을 할 수 있다.

focus와 접근성

이러한 방식으로 키보드를 활용하여
마우스의 도움 없이도 웹 페이지의 정보에 접근할 수 있다.

스크린리더 사용자, 키보드만으로 웹 페이지에 접근하는 사용자는 포커스의 도움을 받는다.
스크린리더를 사용한다면, 포커스가 가리키는 대상의 텍스트 등을 음성안내를 통해 전달받는다.
그리고 포커스된 요소에 enter를 누르면 어떠한 동작이 발생한다.
그리고 키보드 사용자는 만약 이런 포커스가 제공되지 않는다면 현재 자신이 페이지의 어느 부분을 탐색하고 있는지 알 수 없게 된다.

이렇게 포커스가 접근성 측면에서 중요하다는 것을 알고 나니 현재 만들고 있던 로그인 모달에는 문제가 없는지 궁금해 확인해 보았다.

회원가입 부분 포커스가 | 이 부분까지 들어가는 것을 확인했다.
뭔가 이상하다는 생각이 들어 다른 사이트들은 어떻게 처리하고 있는지 확인해보았다.

네이버

에어비엔비

마이리얼트립

네이버는 해당하는 텍스트 부분에만 포커스 되고(a태그), 에어비엔비는 button 전체, 마이리얼트립은 보이지 않는다.

문제를 해결하기 위해 같은 방식을 쓰고 있는 네이버를 참고해서 문제를 해결해 보려고 한다.

우선 네이버를 확인해보자.

네이버의 로그인 페이지를 개발자도구를 통해 확인한 결과 li의 가상 요소로 | 모양을 넣고 있다는 것을 알 수 있다.
그리고 이번에는 내 로그인 모달을 확인해봤다.

내 방식과 네이버의 차이는 나는 a 태그의 가상 요소로 | 를 만들었고, 네이버는 li 태그의 가상 요소로 | 를 만들었다는 것을 확인할 수 있었다.

focus를 받는 태그

그래서 확인을 해보니 focus 받는 태그가 정해져 있었다.

• a 태그
• button 태그
• input 태그
• select 태그
• textarea 태그

내 로그인 모달 같은 경우, a 태그의 가상 요소로 | 가 들어있으므로
포커스가 저렇게 들어갔다고 생각해볼 수 있다.

그래서 저 부분을 ul, li로 처리한 다음 다시 확인했다.

div a 를 li ul a 로 수정

이제 포커스가 정상적으로 잡힌다.