키보드 네비게이션 웹접근성 구현법

여러분, 혹시 마우스 없이 우리 회사 홈페이지를 사용해본 적 있으신가요? 대부분 그냥 클릭 클릭 하다 보니 생각조차 못 했을 거예요. 그런데 시각장애인, 지체장애인 등 마우스 사용이 어려운 분들은 키보드만으로 사이트를 이용해야 하는 경우가 많습니다.

“Tab 키 하나로 홈페이지를 쭉 둘러볼 수 있어야 진짜 웹접근성이 지켜지는 거죠.”

오늘은 기업 고객님들이 놓치기 쉬운 키보드 네비게이션 구현법을 친절하게 풀어보려고 합니다.

키보드 네비게이션이란 마우스 없이 키보드만으로 웹사이트 내 모든 기능을 이용할 수 있는 상태를 말합니다. 보통 Tab, Shift + Tab, Enter, Space, 화살표 키 등을 이용합니다.

기본 규칙은 다음과 같습니다.

다음 순서대로 따라 하시면 됩니다!

팁 하나 더 드리자면, 개발팀과 디자인팀이 같이 테스트해보면 훨씬 빠르게 문제를 잡을 수 있어요.

국내 유명 쇼핑몰 A사는 키보드 네비게이션 문제로 고객 불편 민원이 쏟아졌습니다. 특히 로그인 창과 장바구니 버튼이 포커스 되지 않는 것이 가장 큰 문제였죠.

이에 따라 A사는 아래와 같이 개선 작업을 했습니다.

그 결과, 고객 불편 문의 30% 감소, WCAG 2.1 준수율 95% 달성이라는 성과를 얻었습니다.

여기서 중요한 건, 단순히 겉모양이 아닌 사용자 경험 중심으로 접근해야 한다는 점입니다.

예전에 한 스타트업 대표님이 이런 말씀을 하셨어요. “우리는 장애인 고객이 거의 없을 것 같은데 굳이 접근성까지 신경 써야 하나요?” 그런데 그 회사가 서비스 런칭 후 몇 달 뒤, 장애인 고객 후기 글이 올라왔대요. “여긴 키보드로도 로그인할 수 있어서 좋다”고요.

그때 깨달았대요. 보이지 않는 고객까지 생각하는 게 진짜 기업 철학이라는 걸요.

여러분도 지금 Tab 키 한 번 눌러보세요. 우리 회사 사이트, 정말 모두를 위한 공간인지 직접 확인해보는 것, 오늘부터 시작해보면 어떨까요?